React从Prop获取功能结果

Question

我试图在Prop中定义一个函数，然后在rending时检查结果。但无法让它发挥作用。

任何想法如何获得功能条件的结果？

组件

interface HeaderProps {
    condition? (data: any) : string;
};
class Header extends React.Component<HeaderProps> {
  render() {


// ERROR Expected 1 arguments, but got 0.

//if(this.props.condition() === 'No'){
//}

return (
  <header className="header">
    {<div>{msg}</div>}
  </header>
);

} } `

和应用程序

class App extends React.Component<AppProps> {
    render() {
    return (
    <Header condition = {(text)=>{ return 'No'}}/>
  );
 }
}

Answer 1

在App中正确定义和绑定函数，然后您可以在子组件中使用is作为prop：

class Header extends React.Component<HeaderProps> {
  render() {
    // check and use the result.
    // it requires parameters for function

    if (this.props.condition() === "No") {
      // do something
    }

    return <header className="header">{<div>{msg}</div>}</header>;
  }
}

class App extends React.Component<AppProps> {
  conditionFunction = () => {
    // whatever
    return 'No'
  };

  render() {
    return <Header condition={this.conditionFunction} />;
  }
}