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

我试图使用React和Typescript创建一个简单的标签应用程序。我有一个名为Tabs的Container组件处理状态并将其传递给我的内容组件。我也创建了一个。称为'handleName'的函数，我将它传递给我称为侧栏的功能组件。当函数被触发时，它应该更新我的状态，从而重新呈现我的内容组件。但是，它不起作用。而且我的控制台也没有出现任何错误。它只是没有做任何事情。从容器传递函数到React + TypeScript中的功能组件

这里是我的标签（容器）

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;

来源

2017-09-28 vanegeek

变化

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

到

<Sidebar handleName={this.handleName}/>

还可以使用箭头功能绑定handleName类范围

handleName = (value: string) => {

来源

2017-09-28 20:23:29

@vanegeek看答案。为handleName使用箭头函数。所以将你的方法定义从'handleName（value：string）{'转换为''handleName =（value：string）=> {' –

非常感谢你Prakash !!!!!!!! – vanegeek

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

回答

相关问题