react父子元件間的交流
前言
本部落格主要講述,react中父元件和子元件之間的交流,其中包括父元件和子元件的值的交流和函式方法的交流,即父元件如何如何傳值給子元件,父元件將方法傳給子元件,父元件如何呼叫子元件的方法。
本部落格主要總結性的講述了再react中元件的交流方式,舉出具體程式碼的可參考【React元件之間傳值】。
統一說明
1、<FatherComponents />代表父元件,
2、<ChildrenComponents />代表子元件
(一)父元件通過state傳值給子元件,子元件通過props獲取父元件的傳遞值
//(一)傳值,即在父元件中宣告好自己的state,然後傳值,如下
//1.初始值
constructor() {
super();
this.state = {
stateValue:true
}
}
//2.如有改變設定值
this.setState({
stateValue: false
})
//3.在父元件中傳值
<ChildrenComponents stateValue={this.state.stateValue} />
//(二)取值,即在需要的地方取到通過props取父元件傳過來的值
//如在componentDidMount中取值
componentDidMount() {
const huoquValue = this.props.stateValue;
if ( !this.props.stateValue ) {
console.log('stateValue', this,.props.stateValue)
}
}
值得注意一點的是,setState 是一個非同步方法,需要render值行的時候才會觸發。可以參考我的部落格【 React的setState立即執行方案】。
(二)父元件將方法傳給子元件,子元件通過props來獲取。
//父元件檔案中:
class TestHtml extends React.Component {
//1.方法的宣告
propsFunction() {
console.log('宣告在父元件的方法')
}
render() {
return (
<div>
<span><span>
//2.傳遞
<ChildrenComponents propsFunction={::this.propsFunction} />
</div>
)
}
}
function mapStateToProps(state, ownProps) {
return {
}
}
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators(action, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TestHtml)
子元件中獲取
<Button onClick={this.props.propsFunction} />
說明:寫這一段的時候,突發奇想,竟然就把react-redux的頁面結構的寫出來了。好吧,等下寫完這篇,如果有必要就具體寫一下這個頁面的結構型別吧。
(三)在父元件中呼叫子元件中的方法,通過ref和refs實現。
//這裡就簡要說明一下
//思路是給子元件一個ref,然後父元件通過refs獲取
componentWillReceiveProps(nextProps) {
this.refs.childrenref.子元件的方法名()
//舉個例子
// this.refs.getSwordButton.setFieldsValue({
// xmlUrl: nextProps.sysCode==null ? nextProps.accountInfo.xmlUrl : nextProps.sysCode
// })
// 子元件標籤新增ref屬性
<ChildrenComponents ref="childrenref" />
}
(四)特殊情況
當你發現這些方法都不起作用的時候,或者說,因為某些限制而不能用的時候,你就換一下思路了。
其實我們還可以通過action–reduce的方式在他們的外部且是公共的action-reduce中搞定。
其中涉及到方法我們就直接新建一個方法,在action中宣告,在reduce中實現。如果只是某個值,用不到函式的,我們可以直接在reduce裡面設定,且賦值,最後通過mapStateToProps獲取。
關於mapStateToProps,可以直接參考【React依賴注入說明(mapStateToProps/mapDispatchToProps)】
總結
1.父元件通過state向子元件傳值,子元件通過props獲取父元件所傳的值。
2.子元件通過props獲取父元件中定義的函式方法,但是需要在父元件呼叫子元件的標籤中寫明。
3.父元件通過refs呼叫子元件中宣告的方法,但是需要給子元件新增一個ref節點
4.元件之間的交流也不一定要沉在這些直接性的關聯的東西,我們的思維還可以提升一個高度,可以考慮通過action-reduce來搞定。
end~
歡迎指正。
~
~
有不明白的也可以留言,聯絡方式在個人資料處。