1. 程式人生 > >react 子元件實時的獲取父元件的值

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呼叫