在Reactjs中组件之间进行交互的最佳方式是什么？

我试图从一个子组件拦截用户活动，然后更新它的一个兄弟姐妹的状态。例如在Reactjs中组件之间进行交互的最佳方式是什么？

-RootApp 
--Child1 (has user interaction e.g. onClick) 
--Child2 (needs data from Child1 to update state)

我的解决方案（我觉得这相当不可思议）是我传给Child1回调从RootApp。当用户做onClick on child1回调被调用。回拨RootApp然后更新为Child2定义的道具。 Child2被重新渲染。

我正在做这个对吗？

来源

2014-10-16 Andy B

是的，父组件更新子组件的标准方式是将回调传递给子视图。所以在你的情况下，'Child1'需要告诉'RootApp'在'Child1'中发生一些交互时改变它的状态。将该状态从'RootApp'传递给'Child2'，并且'Child2'将在其状态变化的任何道具时重新呈现 – trekforever 2014-10-16 17:51:19

非常感谢。很高兴看到我在正确的轨道上。 – 2014-10-17 08:30:59

感谢trekforever确认。回调是传递状态的方式。

这是我做的（如题）：

-RootApp 
--Child1 (has user interaction e.g. onClick) 
--Child2 (needs data from Child1 to update state)

有从RootApp传递到Child1回调。当用户点击Child1时，回调被调用。 RootApp中的回调会更新为Child2定义的道具。 Child2被重新渲染。

来源

2014-10-17 10:59:13

回调是要走的路，但是当您需要在根与子之间引入组件时，或者需要重构应用程序并重构UI时，它们可能变得非常麻烦。你可以看看Morearty.js，它使用单个不可变状态数据结构来分离组件。因此，在child的onClick中，您只需更新状态，而依赖该状态部分的所有其他组件将自动重新呈现。有关更多详细信息，请参阅介绍和API文档。

当然，你仍然需要回调许多有效的情况，但其中许多都被消除。

来源

2014-10-21 05:43:31 Tvaroh

非常感谢！当然，如果我想在现有组件之间粘贴一个新组件，它会变得非常混乱！ – 2014-10-21 07:43:01

在Reactjs中组件之间进行交互的最佳方式是什么？

回答

相关问题