如何在不嵌套的情况下“触摸”另一个组件？

Question

给定这个组件树：

c0 - c11 - c12 - c13
   \
     c21 - c22

将一些数据从 c13 发送到 c22 的最佳方式是什么？

在我的情况下，我有类似论坛页面（c0）的东西：有消息提要（c11），消息（c12），“引用”按钮（c13）和一些控件（c21）阻止，包括消息表单（c22） .

我想要的是在单击报价单时向消息表单添加一些文本。 因此，我将回调（通过道具）onQuote 添加到刚刚使用消息文本（带有一些转换）调用的消息，如下所示：this.props.onQuote(txt)。然后我通过在链中传递它从根组件（c0）提供它：c0 - c11 - c12。由于消息形式的文本保持在 c22 状态，我必须创建类似 .setText(txt) 的方法并从 c21 创建委托以从 c0 调用它。

对我来说，这看起来很糟糕（实际上是另一个词）而且很复杂（代码太多）。

我怎样才能做得更好？我不想使用全局状态，我不相信这是做事的反应方式。我真的不喜欢整个“传递”的东西，因为中间有很多组件对数据不做任何事情，只是传递它。

Answer 1

Facebook 本身首选和建议的方法是将状态提升到至少两个组件最近的共同祖先。