react 子元件實時的獲取父元件的值
想讓父元件的state 更新的時候。子元件也根據這個狀態更新
父元件中:
this.state={
show:true
}
用 show={this.state.show} 把父元件的狀態傳進去
<WrappedQueryForm show={this.state.show}/>
子元件中接收這個引數:
componentDidMount() {
console.log(this.props.show)
}
但是發現只有第一次的時候接收到了,父元件state改變,子元件並沒有實時的更新
子元件componentDidMount只會被呼叫一次,所以沒法在這個方法中根據新的props更新你的state,非要這麼做的話,應該在子元件的componentWillReceiveProps(nextProps)這個方法中做。
子元件中接收引數改為:
componentDidMount() {
console.log(this.props.show)
}
componentWillReceiveProps(nextProps) {
if (nextProps.show === "true") {
//do something
}
}
記得要用nextProps奧!
備註:componentDidMount 在初始化render之後只執行一次,在這個方法內,可以訪問任何元件,componentDidMount()
方法中的子元件在父元件之前執行
componentWillReceiveProps:
當props
發生變化時執行,初始化render
時不執行,在這個回撥函式裡面,你可以根據屬性的變化,通過呼叫this.setState()
來更新你的元件狀態,舊的屬性還是可以通過this.props
來獲取,這裡呼叫更新狀態是安全的,並不會觸發額外的render
呼叫