react ES6下子元件呼叫父元件方法
阿新 • • 發佈:2019-02-15
---
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> ); } }