The method (recommended) for the child component to call the parent component under ES6, and the method for calling the es6 component

The method (recommended) for the child component to call the parent component under ES6, and the method for calling the es6 component

For some purposes, I recently started to study RN again. Looking at the tutorial step by step, I recently encountered a problem, that is, the method call of the Parent and Child components.

I have been Baidu for a long time. Under the ES6 Syntax of JS, I used class to create components, and the subcomponent continuously reported errors when calling the parent component method simulator.

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

In es5 syntax, this method has been handled by RN, so the results can be achieved according to the example in the video, but es6 seems to have to be written by itself ..

Add this. xxxxx = this. xxxxx. bind (this) in constructor );

Or write this. xxxxx. bind (this ).

I will not talk about it more here. The code below is for reference by people 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}/> // or <Son ref = "Son1" timex = {this. state. timex} timesReset = {this. timesReset. bind (t His)}/> </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}> son: although you beat me {this. state. times} times, but I will never go wrong !! </Text> <TouchableHighlight style = {styles. btn} underlayColor = {'pink '} onPress = {this. timesReset. bind (this) }>< Text style ={{ textAlign: 'center' }}> hey, give your son another chance !! </Text> </TouchableHighlight> </View> );}}

The method (recommended) for calling the parent component of the sub-component in ES6 is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's home.