Le composant enfant appelle l'instance de méthode du composant parent

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 pose cette question sur Baidu depuis longtemps. Sous la syntaxe ES6 de JS, lors de la création d'un composant utilisant la classe, le sous-composant appelle la méthode du composant parent et le simulateur continue de signaler les erreurs. Cet article partage principalement avec vous une méthode permettant aux sous-composants d'appeler des composants parents sous ES6. J'espère que cela aide tout le monde.

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

Recommandations associées :

Le composant enfant Vuejs2.0 appelle la méthode du composant parent

vue utilise la réf. laisser Le composant parent appelle l'instance du composant enfant

Vue2.0 sur l'émission et la réception d'événements entre le composant parent et le composant enfant

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!