So rufen Sie in ES6 eine übergeordnete Komponente von einer untergeordneten Komponente auf

Dieses Mal zeige ich Ihnen, wie Sie die übergeordnete Komponente in ES6 aufrufen. Was sind die Vorsichtsmaßnahmen für den Aufruf der übergeordneten Komponente in ES6? Fall, werfen wir einen Blick darauf.

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 wird eine Komponente mithilfe einer Klasse erstellt, und die untergeordnete Komponente ruft die Methode der übergeordneten Komponente auf und der Simulator meldet sich 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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was sind die am häufigsten verwendeten Meldungsfelder in JS?

js generiert zufällig 6-stellige Zufallszahlen

So erstellen Sie dynamisch Tags und legen Attribute mit js fest

Das obige ist der detaillierte Inhalt vonSo rufen Sie in ES6 eine übergeordnete Komponente von einer untergeordneten Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!