將函數從容器傳遞到React + TypeScript中的功能組件

Question

我正在嘗試使用React和Typescript創建一個簡單的選項卡應用程序。 我有一個名為Tabs的Container組件，它可以處理狀態並將其傳遞給我的Content組件。 我還創建了一個。 函數名為“ handleName”，然后將其傳遞給名為Sidebar的功能組件。 當函數被觸發時，它應該更新我的狀態，從而重新渲染我的Content組件。 但是，它不起作用。 而且我的控制台也沒有任何錯誤。 它只是什么也沒做。

這是我的標簽頁（容器）

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}/>

還使用箭頭功能將handleName綁定到類范圍

handleName = (value: string) => {