出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题。
这个问题我百度了很久,JS的ES6语法下,用类创建组件,子组件调用父组件方法模拟器不断报错。
因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同。
es5的语法下,方法的这都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的. .
具体的写法就是在构造函数中添加这个。xxxxx=this.xxxxx.bind(这);
或者在子组件绑定的时候就写this.xxxxx.bind(这)。
出口的默认类TestPrj扩展组件{
构造函数(道具){
超级(道具);
这一点。timesReset=this.timesReset.bind(这个);
这一点。状态={天美时:2};
}
timesReset () {
this.setState ({
天美时:0
});
}
呈现(){
回报(
& lt;视图风格={styles.container}比;
& lt;儿子ref=天美时={this.state“救赎”。天美时}timesReset={this.timesReset}/比;//或者& lt;儿子ref=天美时={this.state“救赎”。天美时}timesReset={this.timesReset.bind()}/比;
& lt;/View>
);
}
}
类的儿子{扩展组件
构造函数(道具){
超级(道具);
这一点。状态={:this.props.timex};
}
componentWillReceiveProps(道具){
console.log (this.props);
this.setState ({
时报》:props.timex
}）
}
timesReset () {
this.props.timesReset ();
}
呈现(){
回报(
& lt;视图风格={styles.container}比;
& lt;文本样式={styles.instructions}祝辞
儿子:虽然你揍了我{this.state。*}次,但是我永不屈服! !
& lt;/Text>
& lt; TouchableHighlight风格={风格。onPress btn} underlayColor={“粉红色”}={this.timesReset.bind()}祝辞
& lt;文本样式={{textAlign:‘中心’}}祝辞爹,再给你儿子一次机会! ! & lt;/Text>
& lt;/TouchableHighlight>
& lt;/View>
);
}
}
以上这篇ES6下子组件调用父组件的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
