React Router経由で関数を渡す

Question

React Router経由で子コンポーネントに関数を渡したいと思います。私は以下を試しましたが、うまくいかないようです。

class App extends Component { 
    constructor(props) { 
     super(props) 
    } 

    render() { 
    return (
     <div className="App"> 
      <div className="content"> 
      <div className="centered-wrapper"> 
      <Switch> 
       <Route exact path="/" component={Welcome} /> 
       <Route path="/life" render={props => <Life sayHello = {this.sayHello()} />} /> 
      </Switch> 
      </div>     
     </div> 
    ); 
    } 
} 

export default App; 

私は次のように生命の構成要素でsayHello()を呼び出すしたい：

<div className="hello">{ this.props.sayHello() } I'm <Link to="/life">Marco</Link>! Welcome to my hood.</div> 

Answer 1

は交換してください：

<Route path="/life" render={props => <Life sayHello = {this.sayHello()} />} /> 

を

<Route path="/life" render={props => <Life sayHello = {this.sayHello} />} /> 

で間違いの小道具は、結果を受け取ります関数自体の代わりにsayHello()関数の呼び出し。

Answer 2

関数を渡す代わりに、関数を呼び出して、返された結果をpropとして渡します。

sayHello // function object 
sayHello() // function call, evaluates to return 

括弧を削除します。将来的には

render={props => <Life sayHello={this.sayHello} />} 

を、あなたがコンソールに表示されたエラーを見て、あなたの質問に追加します。 、あなたは問題を自分で発見した可能性が

Uncaught TypeError: undefined is not a function 

この情報を使用して、または支援しようと、誰のためにそれが明確に作られた：あなたはLifeコンポーネントでsayHelloを呼び出すようにしようとした場合は、きっとあなたはこのようなエラーを見ました:)