首页 > 开发 > JS > 正文

ES6下子组件调用父组件的方法(推荐)

2024-05-06 16:42:35
字体:
来源:转载
供稿:网友

出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题。

这个问题我百度了很久,JS的ES6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错。

因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同。

es5的语法下,方法的this都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的。。

具体的写法就是在constructor中添加 this.xxxxx = this.xxxxx.bind(this);

或者在子组件绑定的时候就写this.xxxxx.bind(this) .

这里就不多讲了,下面上代码,以供需要的人参考。

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={'pink'} onPress={this.timesReset.bind(this)}>        <Text style={{textAlign:'center'}}>爹,再给你儿子一次机会!!</Text>      </TouchableHighlight>    </View>    );  }}

以上这篇ES6下子组件调用父组件的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表