Die untergeordnete Komponente ruft die Methodeninstanz der übergeordneten Komponente auf

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 Unterkomponente beim Erstellen einer Komponente mithilfe einer Klasse die Methode der übergeordneten Komponente auf und der Simulator meldet weiterhin Fehler. In diesem Artikel wird hauptsächlich eine Methode vorgestellt, mit der Unterkomponenten unter ES6 übergeordnete Komponenten aufrufen können. Ich hoffe, es hilft allen.

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>
    );
  }
}

Verwandte Empfehlungen:

Die untergeordnete Vuejs2.0-Komponente ruft die Methode der übergeordneten Komponente auf

vue verwendet ref lassen Die übergeordnete Komponente ruft die Instanz der untergeordneten Komponente auf

Vue2.0 über die Ereignisemission und den Empfang zwischen der übergeordneten Komponente und der untergeordneten Komponente

Das obige ist der detaillierte Inhalt vonDie untergeordnete Komponente ruft die Methodeninstanz der übergeordneten Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!