1. 程式人生 > >react ES6下子元件呼叫父元件方法

react ES6下子元件呼叫父元件方法

---

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