前言

本部落格主要講述，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~
歡迎指正。
~

~
有不明白的也可以留言，聯絡方式在個人資料處。