這篇文章將為大家詳細講解有關如何解決React中組件通信問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)建站長期為超過千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為張店企業(yè)提供專業(yè)的成都網(wǎng)站設計、網(wǎng)站建設，張店網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
父子組件
父 → 子
parent組件傳給child組件，符合react的單向數(shù)據(jù)流理念，自上到下傳遞props。
重慶分公司
重慶分公司
// 父組件
class Parent extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
this.setState({
value: this.value,
})
}
render() {
return (
我是parent
通知
// 子組件
class Child extends Component {
render() {
const { value } = this.props;
return (
我是Child，得到傳下來的值：{value}
);
}
}父組件做的就是定義好 state ，定義好事件函數(shù)，input onChange 的時候，去緩存 value 值，然后點擊 button 的時候，改變 state , 子組件只負責展示 value 。
子 → 父
child 組件通知 parent 組件， 主要是依靠 parent 傳下來的 callback 函數(shù)執(zhí)行，改變 parent 組件的狀態(tài)，或者把 child 自己的 state 通知 parent 。分兩種情況：
state 定義在 parent 組件
// parent
class Parent extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
setValue = value => {
this.setState({
value,
})
}
render() {
return (
我是parent, Value是：{this.state.value}
class Child extends Component {
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.props;
setValue(this.value);
}
render() {
return (
我是Child
state 定義在 parent
通知
parent 組件把改變 state 的 setValue 函數(shù)傳給 child ，child 組件自己處理內(nèi)部的狀態(tài)（這里是表單的value值），當 child 組件分發(fā)消息的時候， 執(zhí)行 parent 的 setValue 函數(shù)，從而改變了 parent 的 state，state發(fā)生變化， parent 組件執(zhí)行 re-render 。
state 定義在 child 組件
// parent
class Parent extends Component {
onChange = value => {
console.log(value, '來自 child 的 value 變化');
}
render() {
return (
我是parent
class Child extends Component {
constructor() {
super();
this.state = {
childValue: ''
}
}
childValChange = e => {
this.childVal = e.target.value;
}
childValDispatch = () => {
const { onChange } = this.props;
this.setState({
childValue: this.childVal,
}, () => { onChange(this.state.childValue) })
}
render() {
return (
我是Child
state 定義在 child
通知
);
}
}有時候 state 是需要定義在 child 組件的，比如彈窗， CheckBox 這種開關性質(zhì)的，邏輯是重復的，state 定義在組件內(nèi)部更好維護， 復用性更好。但是 child 的 state 是需要告知我的 parent 組件的， 同樣還是執(zhí)行 parent 傳下來的 change 函數(shù)。
兄弟組件
有時候可能出現(xiàn)頁面中的某兩部分通信，比如省市的級聯(lián)選擇，點擊 button 改變顏色等等，組件并不是父子級，沒有嵌套關系的時候。這種時候通常是依賴共有的頂級 Container 處理或者第三方的狀態(tài)管理器。其實原理都是相通的，兄弟 A 的 value 發(fā)生變化，分發(fā)的時候把 value 值告訴一個中間者 C ，C 會自動告知 B，實現(xiàn) B 的自動render 。
利用共有的Container
// container
class Container extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
setValue = value => {
this.setState({
value,
})
}
render() {
return (
// 兄弟A
class A extends Component {
handleChange = (e) => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.props;
setValue(this.value);
}
render() {
return (
我是Brother A, 通知
)
}
} 
