In ES6 rufen untergeordnete Komponenten die Verwendungsmethoden der übergeordneten Komponente auf

Wie implementiert man Unterkomponenten, die übergeordnete Komponenten aufrufen, unter ES6? Als Nächstes werde ich Ihnen einen Artikel darüber vorstellen, wie eine untergeordnete Komponente unter ES6 eine übergeordnete Komponente aufruft. Ich hoffe, es hilft allen.

Aus bestimmten Gründen habe ich kürzlich wieder damit begonnen, RN zu studieren. Als ich mir die Tutorials ansah, um Schritt für Schritt zu lernen, stieß ich kürzlich auf ein Problem, nämlich das Problem des Methodenaufrufs von Eltern-Kind-Komponenten.

Ich habe lange nach diesem Problem auf Baidu gesucht. Unter der ES6-Syntax von JS ruft die untergeordnete Komponente beim Erstellen einer Komponente mithilfe einer Klasse die Methode der übergeordneten Komponente auf und der Simulator meldet weiterhin Fehler .

Da es sich bei dem Video, das ich mir angesehen habe, um Code handelt, der auf der ES5-Syntax basiert, ist die Syntax etwas anders.

Unter der Syntax von es5 wurde dies der Methode von RN für uns erledigt, sodass der Effekt gemäß dem Beispiel im Video erzielt werden kann, aber es scheint, dass es6 von uns selbst geschrieben werden muss . .

Die spezifische Art, es zu schreiben, besteht darin, this.xxxxx = this.xxxxx.bind(this); hinzuzufügen

oder this.xxxxx.bind(this) zu schreiben, wenn die Unterkomponente gebunden wird ) .

Ich werde hier nicht auf Details eingehen. Der Code wird unten als Referenz für diejenigen angegeben, die ihn benötigen.

export default class TestPrj extends Component {
    constructor(props){
      super(props);
      this.timesReset = this.timesReset.bind(this);
      this.state = {timex:2};
    }
    timesReset(){
      this.setState({
        timex:0
      });
    }
    render() {
      return(
        <View style={styles.container}>
          <Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset}/>
          //或者<Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset.bind(this)}/>
        </View>
      );
    }
  }
 class Son extends Component{
  
  constructor(props){
    super(props);
    this.state = {times:this.props.timex};
  }
  componentWillReceiveProps(props){
    console.log(this.props);
    this.setState({
      times:props.timex
    })
  }
  timesReset(){
    this.props.timesReset();
  }
  render(){
    return(
    <View style={styles.container}>
      <Text style={styles.instructions}>
      儿子：虽然你揍了我 {this.state.times} 次，但是我 永 不 屈 服！！
      </Text>
      <TouchableHighlight style={styles.btn} underlayColor={&#39;pink&#39;} onPress={this.timesReset.bind(this)}>
        <Text style={{textAlign:&#39;center&#39;}}>爹，再给你儿子一次机会！！</Text>
      </TouchableHighlight>
    </View>
    );
  }
}

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie ExtJs zur Integration von Echarts (ausführliches Tutorial)

So fügen Sie div-Methoden dynamisch hinzu und löschen sie angleJS

Detaillierte Erläuterung von Elementen, Komponenten, Instanzen und Knoten in React

Das obige ist der detaillierte Inhalt vonIn ES6 rufen untergeordnete Komponenten die Verwendungsmethoden der übergeordneten Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!