鍍金池/ 問(wèn)答/HTML/ 組件之間通信的問(wèn)題

組件之間通信的問(wèn)題

問(wèn)題描述

左右兩個(gè)模塊分別由很多個(gè)子組件構(gòu)成,當(dāng)左側(cè)點(diǎn)擊某個(gè)子組件,右側(cè)的板塊顯示不同的內(nèi)容(該內(nèi)容由很多子組件構(gòu)成)
【問(wèn)】:當(dāng)右側(cè)的各個(gè)子組件中的值發(fā)生變化時(shí),如何將這些變化的值顯示在左側(cè)對(duì)應(yīng)的子組件中?

相關(guān)代碼

clipboard.png

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

右側(cè)的子組件是公共的,點(diǎn)擊左側(cè)其他的組件,右側(cè)部分可能會(huì)引用到部分公共的組件,那當(dāng)右側(cè)的子組件中的值發(fā)生改變的時(shí)候,如何將這些值顯示在左側(cè)某個(gè)子組件中?

我想到需要將值存儲(chǔ)在state中,但是這個(gè)邏輯一直想不通,React,個(gè)人還是小白,請(qǐng)各位大神指點(diǎn)下,給點(diǎn)思路就可以了,先謝過(guò)~

回答
編輯回答
夢(mèng)若殤

1、可以在右側(cè)組件onchange調(diào)用的時(shí)候考慮更新左側(cè)組件state;
2、可以在右側(cè)組件和左側(cè)組件的公用父組件更新這些狀態(tài);
3、進(jìn)階:引入redux 但是鑒于樓主還是個(gè)新手 不推薦額外的學(xué)習(xí)任務(wù)

2017年8月22日 19:31
編輯回答
夢(mèng)若殤

redux可以輕松實(shí)現(xiàn)你的需求 單使用state父子傳數(shù)據(jù)的方式會(huì)比較繞。建議引入redux

2017年8月2日 10:12
編輯回答
莓森

左邊的組件和右邊的組件同時(shí)訂閱同一個(gè)store。 左邊或者右邊變化都去修改store,store修改通知左右組件進(jìn)行更新即可。

具體實(shí)現(xiàn)有父子傳遞,redux,事件總線甚至localStorage也可以

2017年12月18日 22:18