React + TypeScriptのコンテナから機能コンポーネントに関数を渡す

Question

ReactとTypescriptを使用して簡単なタブアプリケーションを作成しようとしています。状態を処理してコンテンツコンポーネントに渡すタブというコンテナコンポーネントがあります。私も作成しました。関数 'handleName'と呼ばれ、私はサイドバーと呼ばれる機能コンポーネントに渡しています。関数がトリガされると、私の状態を更新してコンテンツコンポーネントを再レンダリングすることになっています。しかし、それは動作していません。私のコンソールにもエラーはありません。何もしていないだけです。ここで

は、ここに私のタブ（コンテナ）

import * as React from 'react'; 
import Sidebar from './Sidebar'; 
import Content from './Content'; 
import './css/Tabs.css'; 

export interface State { 
    message: string; 
} 

class Tabs extends React.Component<{}, State> { 
    public state: State = { 
     message: 'Select a name from the tabs menu', 
    }; 

    componentWillMount() { 
     if ('pluginLoaded' in window) { 
      (window as any).pluginLoaded('hello', function (port: any, context: any) { 
       // Future work should interact with the message channel here 
      }); 
     } 
    } 

    handleName(value: string) { 
     if (value === 'Vanessa') { 
      this.setState({ 
       message: 'Vanessa means "butterfly"' 
      }); 
     } else if (value === 'Paola') { 
      this.setState({ 
       message: 'Paola means "small"' 
      }); 
     } 
    } 

    render() { 
     return (
      <div className="Tabs"> 
       <p>Tabs</p> 
       <Sidebar handleName={() => this.handleName}/> 
       <Content message={this.state.message}/> 
      </div> 
     ); 
    } 
} 

export default Tabs; 

である私のサイドバー

import * as React from 'react'; 

export interface Props { 
    handleName: (value: String) => void; 
} 

const Sidebar: React.StatelessComponent<Props> = (props) => { 

    // declare constants 
    const Vanessa = 'Vanessa', 
     Paola = 'Paola'; 

    return(
     <div className="Sidebar"> 
      <h1>Tabs</h1> 
      <ul> 
       <li><a onClick={() => props.handleName(Vanessa)}>Vanessa</a></li> 
       <li><a onClick={() => props.handleName(Paola)}>Paola</a></li> 
      </ul> 
     </div> 
    ); 
}; 

export default Sidebar; 

そして、ここでは私のコンテンツ

import * as React from 'react'; 

export interface Props { 
    message: string; 
} 

const Content: React.StatelessComponent<Props> = (props) => { 

    return(
     <div className="Content"> 
      <h1>Find the meaning</h1> 
      <p>{props.message}</p> 
     </div> 
    ); 
}; 

export default Content; 

Answer 1

です変更

<Sidebar handleName={() => this.handleName}/> 

<Sidebar handleName={this.handleName}/> 

へ

も答えを見てください@vanegeekクラススコープ

handleName = (value: string) => {