react父子組件間的交流__react

本部落客要講述，react中父組件和子組件之間的交流，其中包括父組件和子組件的值的交流和函數方法的交流，即父組件如何如何傳值給子組件，父組件將方法傳給子組件，父組件如何調用子組件的方法。
本部落客要總結性的講述了再react中組件的交流方式，舉出具體代碼的可參考【React組件之間傳值】。

統一說明1、<FuZujian />代表父組件，2、<ZiZujian />代表子組件

（一）父組件通過state傳值給子組件，子組件通過props擷取父組件的傳遞值

//(一)傳值，即在父組件中聲明好自己的state，然後傳值，如下//1.初始值constructor() {    super();    this.state = {      stateValue：true    }  }//2.如有改變設定值this.setState({    stateValue: false})//3.在父組件中傳值<ZiZujian 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.傳遞            <ZiZujian 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.jiedian.子組件的方法名（）    //舉個例子    // this.refs.getSwordButton.setFieldsValue({    //   xmlUrl: nextProps.sysCode==null ? nextProps.accountInfo.xmlUrl : nextProps.sysCode    // })<ZiZujian ref="jiedian" />}

（四）特殊情況
當你發現這些方法都不起作用的時候，或者說，因為某些限制而不能用的時候，你就換一下思路了。
其實我們還可以通過action–reduce的方式在他們的外部且是公用的action-reduce中搞定。
其中涉及到方法我們就直接建立一個方法，在action中聲明，在reduce中實現。如果只是某個值，用不到函數的，我們可以直接在reduce裡面設定，且賦值，最後通過mapStateToProps擷取。
關於mapStateToProps，可以直接參考【React依賴注入說明（mapStateToProps/mapDispatchToProps）】

總結
1.父組件通過state向子組件傳值，子組件通過props擷取父組件所傳的值。
2.子組件通過prop擷取父組件中定義的函數方法，但是需要在父組件調用子組件的標籤中寫明。
3.父組件通過refs調用子組件中聲明的方法，但是需要給子組件添加一個ref節點
4.組件之間的交流也不一定要沉在這些直接性的關聯的東西，我們的思維還可以提神一個高度，可以在action-reduce中搞定。
end~
歡迎指正。
~

~
有不明白的也可以留言，連絡方式在設定檔處。