亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

嵌套組件可以改變 React 上下文嗎?

嵌套組件可以改變 React 上下文嗎?

動漫人物 2022-12-02 17:19:15
我有兩個組件位于組件樹中的不同位置。由于布局原因,它們不能嵌套,但我需要它們進行通信。我已經嘗試過 React 上下文,但據我了解,消費者需要成為提供者的孩子,這違背了目的。有沒有辦法擁有三個組件:一個總體提供者、一個將改變提供者狀態的組件和一個消費者?幫助澄清的偽代碼:<PROVIDER />   <SOURCE OF DATA />   <CONSUMER /><PROVIDER />
查看完整描述

2 回答

?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

是的,在 React 中,數據總是沿著樹向下流動。


這些狀態管理問題確實很常見;許多庫(例如 Redux、Mobx)旨在解決這些問題,我建議您研究一下它們。


但是,如果您真的不能將這兩個組件分開,并且您現在不想學習/包含狀態管理庫,那么您可以使用上下文來線程化數據;訣竅是將回調函數與您在上下文中線程處理的數據一起傳遞。


當<SOURCE OF DATA />組件收集到新數據時,它可以使用新數據調用此回調;此回調函數(在提供者組件中定義)隨后將更新提供者的狀態,然后將導致使用新數據值對所有子組件進行全面刷新。(我在下面(非常)粗略地說明了這一點;語法會根據您是否使用鉤子而有所不同。)


PROVIDER COMPONENT:

   state = data

   callback = (newData) => updateState(data <= newData)              

   return(

       <MyContext.Provide { data, callback } >     // provides { data, callback }

           <SOURCE OF DATA />   // consumes callback from context and invokes callback(newData)

           <CONSUMER />         // consumes data/newData from context

       </MyContext.Provider>

   );

現在,如果您在上面指出的組件實際上都是提供者中的“兄弟”,那么您不需要上下文:通過 props 進行簡單的回調就可以了。


查看完整回答
反對 回復 2022-12-02
?
揚帆大魚

TA貢獻1799條經驗 獲得超9個贊

不。在 React 中,數據總是自上而下地流向樹的其余部分。上下文專門是一種使值可用于給定組件子樹的機制。上下文實例的值通常保存在 React 組件狀態中,在呈現<MyContext.Provider>. 所以,國家也必須不負眾望。

如果你真的需要讓廣泛分離的組件像這樣與相同的數據交互,那么是時候開始考慮 Redux 或其他外部狀態管理工具了。


查看完整回答
反對 回復 2022-12-02
  • 2 回答
  • 0 關注
  • 97 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號