react ES6下子组件调用父组件方法

最新推荐文章于 2025-06-15 11:36:03 发布

原创最新推荐文章于 2025-06-15 11:36:03 发布 · 1.1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React Native #子组件 #调用方法

React Native 同时被 2 个专栏收录

7 篇文章

订阅专栏

react-js

2 篇文章

订阅专栏

本文介绍了在React ES6环境下，子组件调用父组件方法的常见问题及解决办法。作者指出，与ES5不同，ES6中需要在构造函数中通过bind(this)来确保方法内的this指向正确。作者推荐使用箭头函数，以简化代码。文中提供了相关代码示例，可供开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---

2018-5-30

想不到这一篇文章居然有这么多的阅读量，既然如此我就来更正优化一下代码，也算是修一下之前的坑吧~

---

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

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

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

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

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

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

或者是使用箭头函数，这样this就会固定，不需要bind设置函数内部的this指向了。

推荐的话是使用箭头函数，更简单。

下面上代码，以供需要的人参考。

export default class TestPrj extends Component {
        constructor(props){
            super(props);
            this.timesReset = this.timesReset.bind(this);
            this.state = {  timex:2  };
        }
        timesReset(){  // 这里的函数是经过constructor中绑定过this的
            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};
    }
    // static getDerivedStateFromProps(nextProps, prevState) {  return { times: nextProps.timex };  } // -->此处是react16.3+的最新取代willReceiveProps的语法

    componentWillReceiveProps(props){
        console.log(this.props);
        this.setState({
            times:props.timex
        })
    }


    timesReset = () => { // 此处使用箭头函数，避免bind绑定
        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}>
                <Text style={{textAlign:'center'}}>爹，我错了</Text>
            </TouchableHighlight>
        </View>
        );
    }
}