In ES6, child components call parent component usage methods

How to implement sub-component calling parent component under ES6? Next, I will share with you an article on how a child component calls a parent component under ES6. I hope to be helpful.

For some purposes, I recently started to study RN again. While watching the tutorials to learn step by step, I recently encountered a problem, that is, the problem of method invocation of parent-child components.

I have been asking this question on Baidu for a long time. Under the ES6 syntax of JS, when a component is created using class, the sub-component calls the method of the parent component and the simulator keeps reporting errors.

Because the video I watched is code based on es5 syntax, so the syntax is somewhat different.

Under the syntax of es5, the this of the method has been handled by RN for us, so the effect can be achieved according to the example in the video, but it seems that es6 needs to be written by ourselves. .

The specific way to write it is to add this.xxxxx = this.xxxxx.bind(this);

or write this.xxxxx.bind(this) when binding the subcomponent ) .

I won’t go into details here, but the code is given below for reference by those who need it.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ExtJs to integrate Echarts (detailed tutorial)

How to dynamically add and delete div methods in angularJS

Detailed interpretation of elements, components, instances and nodes in React

The above is the detailed content of In ES6, child components call parent component usage methods. For more information, please follow other related articles on the PHP Chinese website!