Übergeben Sie eine Funktion über React Router

Question

Ich möchte eine Funktion an eine untergeordnete Komponente über React Router übergeben. Ich habe Folgendes versucht, aber es scheint nicht zu funktionieren.

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; 

wollte ich sayHello() im Leben-Komponente aufzurufen, wie folgt:

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

Answer 1

ersetzen:

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

mit

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

Die Fehler Requisiten das Ergebnis erhalten Aufruf von sayHello() Funktion statt Funktion selbst.

Answer 2

Anstatt die Funktion zu übergeben, rufen Sie sie auf und übergeben das zurückgegebene Ergebnis als Prop.

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

Entfernen Sie die Klammer:

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

In Zukunft werfen Sie einen Blick auf die Fehler Sie in der Konsole sehen und fügen Sie sie auf Ihre Frage. Wenn Sie sayHello in der Life Komponente aufzurufen versucht, sicher haben Sie einen Fehler ähnlich wie diese:

Uncaught TypeError: undefined is not a function 

Mit diesen Informationen haben Sie das Problem selbst gefunden konnte, oder machte es für jedermann klarer versuchen zu helfen :)