嵌套组件可以改变 React 上下文吗？

Question

我有两个组件位于组件树中的不同位置。由于布局原因，它们不能嵌套，但我需要它们进行通信。我已经尝试过 React 上下文，但据我了解，消费者需要成为提供者的孩子，这违背了目的。有没有办法拥有三个组件：一个总体提供者、一个将改变提供者状态的组件和一个消费者？帮助澄清的伪代码：<PROVIDER />   <SOURCE OF DATA />   <CONSUMER /><PROVIDER />

Answer 1

是的，在 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 进行简单的回调就可以了。

Answer 2

不。在 React 中，数据总是自上而下地流向树的其余部分。上下文专门是一种使值可用于给定组件子树的机制。上下文实例的值通常保存在 React 组件状态中，在呈现<MyContext.Provider>. 所以，国家也必须不负众望。

如果你真的需要让广泛分离的组件像这样与相同的数据交互，那么是时候开始考虑 Redux 或其他外部状态管理工具了。