Versucht, Wert an eine Funktion zu übergeben, die als Requisiten

Question

übergeben wurde Ich habe den folgenden Code. Wenn ich die setText-Funktion einmal an die MyClicker-Klasse übergeben, funktioniert es gut. Also, in dem Code unten, sehe ich den Text "Second Text" richtig angezeigt.

Aber ich bin zu wollen, auch die setText Funktion zu einer Enkelkind-Klasse übergeben. Der Text "3. Text" unten erscheint nie.

Die Schaltfläche erscheint in Ordnung, aber es scheint nicht, etwas zu tun, wenn ich es klicken. In der Konsole wird keine Fehlermeldung angezeigt und die Funktion setText() wird nicht aufgerufen.

Ich hatte ursprünglich:

<Voo setText={this.setText.bind(this)} /> 

statt

<Voo setText={() => this.setText} /> 

aber wurde die folgende Fehlermeldung erhalten:

Warning: setState(...): Cannot update during an existing state transition

Nach einem Blick in die Ursache des Fehlers, habe ich versucht, die Pfeil Funktion wie oben, aber wieder gibt es keinen Fehler, und die Funktion setText wird nicht aufgerufen.

Hier ist eine vereinfachte Version von meinem Code:

Poo Klasse:

import MyClicker from './MyClicker' 
import Voo from './Voo' 

class Poo extends React.Component { 

    constructor() { 
     super(); 

     this.state = { 
      text: "Intro Text", 
     }; 

    } 

    setText(text){ 
     this.setState({ 
      text: text 
     }) 
    } 

    render(){ 
     return (
      <div> 
       <h2>{this.state.text}</h2> 
       <MyClicker handleClick={this.setText.bind(this, "Second Text")} text="Click for 2nd Text" /> 

       <Voo setText={() => this.setText} /> 
     ) 
    } 

} 

Voo Klasse:

import MyClicker from './MyClicker' 
class Voo extends React.Component { 

    render(){ 
     <MyClicker handleClick={this.props.setText("Third Text")} text="Click for 3rd Text" /> 
    } 

} 

MyClicker Klasse:

class MyClicker extends React.Component { 

    handleClick(){ 
     this.props.handleClick(); 
    } 


    render(){ 
     return (
      <div onClick={this.handleClick.bind(this)}>{this.props.text}</div> 
      ) 

    } 

} 

Was kann ich tun, um dieses Problem zu lösen lem?

Answer 1

Voo Klasse hat einen kleinen Syntaxfehler auf handleClick prop.

Es sollte wie folgt sein;

Wenn Sie es wie Sie verwenden, wird die Funktion ausgeführt und nicht nur als Prop übergeben. Parenthesizes führt die Funktion aus.

Answer 2

Sie können Ihre Funktion so binden. Und übergeben Sie die setText wie unten, dann werden Sie dies und was immer "automatisch" benötigt passieren.

Wenn Sie () verwenden, werden Sie setState ausführen, die Ihre Komponente neu rendern und den Status erneut ausführen wird ... eine Endlosschleife wurde erstellt.

setText = (text) => { 
    this.setState({ 
     text: text 
    }) 
} 

<Voo setText={this.setText} />