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

Question

我有两个组件位于组件树中的不同位置。由于布局原因，它们不能嵌套，但我需要它们进行通信。

我已经尝试过 React 上下文，但据我了解，消费者需要成为提供者的孩子，这违背了目的。

有没有办法拥有三个组件：一个总体提供者、一个将改变提供者状态的组件和一个消费者？

帮助澄清的伪代码：

<PROVIDER />

   <SOURCE OF DATA />

   <CONSUMER />

<PROVIDER />

Answer 1

是的，在 React 中，数据总是沿着树向下流动。这些状态管理问题确实很常见；许多库（例如 Redux、Mobx）旨在解决这些问题，我建议您研究一下它们。但是，如果您真的不能将这两个组件分开，并且您现在不想学习/包含状态管理库，那么您可以使用上下文来线程化数据；诀窍是将回调函数与您在上下文中线程处理的数据一起传递。当<SOURCE OF DATA />组件收集到新数据时，它可以使用新数据调用此回调；此回调函数（在提供者组件中定义）随后将更新提供者的状态，然后将导致使用新数据值对所有子组件进行全面刷新。（我在下面（非常）粗略地说明了这一点；语法会根据您是否使用钩子而有所不同。）PROVIDER COMPONENT:&nbsp; &nbsp;state = data&nbsp; &nbsp;callback = (newData) => updateState(data <= newData)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp;<MyContext.Provide { data, callback } >&nbsp; &nbsp; &nbsp;// provides { data, callback }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<SOURCE OF DATA />&nbsp; &nbsp;// consumes callback from context and invokes callback(newData)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<CONSUMER />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// consumes data/newData from context&nbsp; &nbsp; &nbsp; &nbsp;</MyContext.Provider>&nbsp; &nbsp;);现在，如果您在上面指出的组件实际上都是提供者中的“兄弟”，那么您不需要上下文：通过 props 进行简单的回调就可以了。

Answer 2

不。在 React 中，数据总是自上而下地流向树的其余部分。上下文专门是一种使值可用于给定组件子树的机制。上下文实例的值通常保存在 React 组件状态中，在呈现<MyContext.Provider>.&nbsp;所以，国家也必须不负众望。如果你真的需要让广泛分离的组件像这样与相同的数据交互，那么是时候开始考虑 Redux 或其他外部状态管理工具了。