首頁(yè) 猿問嵌套組件可以改變 React 上下文嗎？

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

JavaScript

動(dòng)漫人物 2022-12-02 17:19:15

我有兩個(gè)組件位于組件樹中的不同位置。由于布局原因，它們不能嵌套，但我需要它們進(jìn)行通信。我已經(jīng)嘗試過 React 上下文，但據(jù)我了解，消費(fèi)者需要成為提供者的孩子，這違背了目的。有沒有辦法擁有三個(gè)組件：一個(gè)總體提供者、一個(gè)將改變提供者狀態(tài)的組件和一個(gè)消費(fèi)者？幫助澄清的偽代碼：<PROVIDER /> <SOURCE OF DATA /> <CONSUMER /><PROVIDER />

查看完整描述

2 回答

慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

是的，在 React 中，數(shù)據(jù)總是沿著樹向下流動(dòng)。

這些狀態(tài)管理問題確實(shí)很常見；許多庫(kù)（例如 Redux、Mobx）旨在解決這些問題，我建議您研究一下它們。

但是，如果您真的不能將這兩個(gè)組件分開，并且您現(xiàn)在不想學(xué)習(xí)/包含狀態(tài)管理庫(kù)，那么您可以使用上下文來線程化數(shù)據(jù)；訣竅是將回調(diào)函數(shù)與您在上下文中線程處理的數(shù)據(jù)一起傳遞。

當(dāng)<SOURCE OF DATA />組件收集到新數(shù)據(jù)時(shí)，它可以使用新數(shù)據(jù)調(diào)用此回調(diào)；此回調(diào)函數(shù)（在提供者組件中定義）隨后將更新提供者的狀態(tài)，然后將導(dǎo)致使用新數(shù)據(jù)值對(duì)所有子組件進(jìn)行全面刷新。（我在下面（非常）粗略地說明了這一點(diǎn)；語法會(huì)根據(jù)您是否使用鉤子而有所不同。）

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>

);

現(xiàn)在，如果您在上面指出的組件實(shí)際上都是提供者中的“兄弟”，那么您不需要上下文：通過 props 進(jìn)行簡(jiǎn)單的回調(diào)就可以了。

反對(duì) 回復(fù) 2022-12-02

揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

不。在 React 中，數(shù)據(jù)總是自上而下地流向樹的其余部分。上下文專門是一種使值可用于給定組件子樹的機(jī)制。上下文實(shí)例的值通常保存在 React 組件狀態(tài)中，在呈現(xiàn)<MyContext.Provider>. 所以，國(guó)家也必須不負(fù)眾望。

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

反對(duì) 回復(fù) 2022-12-02