Javascript 在React+TypeScript中将函数从容器传递到功能组件

我正在尝试使用React和Typescript创建一个简单的tabs应用程序。我有一个名为Tabs的容器组件，它处理状态并将其传递给我的内容组件。我还创建了一个。函数名为“handleName”，我将它传递给名为Sidebar的功能组件。当函数被触发时，它应该更新我的状态，从而重新呈现我的内容组件。然而，它不起作用。我的控制台中也没有任何错误。它只是什么都不做

这是我的标签盒

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;

改变

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

<Sidebar handleName={this.handleName}/>

handleName = (value: string) => {