Dans ES6, les composants enfants appellent les méthodes d'utilisation des composants parents

Comment implémenter le composant parent appelant un sous-composant sous ES6 ? Ensuite, je partagerai avec vous une méthode pour appeler des composants parents à partir de sous-composants sous ES6. J'espère que cela aide tout le monde.

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, à savoir 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, un composant est créé à l'aide de la classe, et le composant enfant appelle la méthode du composant parent et le simulateur continue de signaler. erreurs.

Parce que la vidéo que j'ai regardée est un code basé sur la syntaxe es5, la syntaxe est donc un 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>
    );
  }
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser ExtJs pour intégrer Echarts (tutoriel détaillé)

Comment ajouter et supprimer dynamiquement des méthodes div dans angulaireJS

Explication détaillée des éléments, composants, instances et nœuds dans React

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!