Comment appeler le composant parent à partir du composant enfant dans ES6

Cette fois, je vais vous montrer comment appeler le composant parent dans ES6. Quelles sont les précautions pour appeler le composant parent dans ES6. Voici un cas pratique, jetons un coup d'œil.

Pour certaines raisons, j'ai récemment recommencé à étudier RN En regardant les tutoriels pour apprendre étape par étape, j'ai récemment rencontré un problème, c'est-à-dire le problème de l'invocation de méthode des composants parent-enfant.

Je recherche ce problème sur Baidu depuis longtemps. Sous la syntaxe ES6 de JS, lors de la création d'un composant à l'aide de la classe, le composant enfant appelle la méthode du composant parent et le simulateur continue de signaler les erreurs. .

Parce que la vidéo que j'ai regardée est un code basé sur la syntaxe es5, donc la syntaxe est quelque peu différente.

Sous la syntaxe d'es5, le this de la méthode a été géré par RN pour nous, donc l'effet peut être obtenu selon l'exemple de la vidéo, mais il semble que es6 doive être écrit par nous-mêmes . .

La manière spécifique de l'écrire est d'ajouter this.xxxxx = this.xxxxx.bind(this);

ou d'écrire this.xxxxx.bind(this) lors de la liaison du sous-composant ) .

Je n'entrerai pas dans les détails ici. Le code est donné ci-dessous pour référence par ceux qui en ont besoin.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les boîtes de message couramment utilisées dans JS

js génère de manière aléatoire des nombres aléatoires à 6 chiffres

Comment créer dynamiquement des balises et définir des attributs à l'aide de js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!