【问题标题】:Communicate between React components without a parent在没有父级的 React 组件之间进行通信
【发布时间】:2016-12-02 12:40:54
【问题描述】:

我正在研究如何在不共享父级的 2 个 ReactJS 组件之间进行通信,因此它只是页面上的根组件。

在互联网的帮助下,我发现 Redux 是应该使用的库,以便将事件委托给商店。

但是,如果我想创建一个可重用的简单组件(例如可从其他组件中控制的按钮),这在故事中的什么位置?

每个按钮都必须有自己独特的事件,但我不知道如何实际操作。

我错过了什么吗?

【问题讨论】:

  • 您能否提供一个示例场景,您希望不同父级的子组件相互通信?还是您只是想制作哑/无状态/演示组件?
  • 我只想制作展示组件,而不是完整的应用程序。例如,我想创建一个组件,假设它是一个具有一些属性的按钮,例如“启用”。我希望用户安装这个组件并为这个命令公开一个 API,所以它的“启用”属性可以是任何其他组件中的控制器。这对你有意义吗?在 JavaScript 中,您可以通过控件的 id 引用控件并在其上执行方法。我想要 ReactJS 中类似的东西。
  • 我想我明白了。你不需要 Redux 来制作展示组件,你可以通过将适当的 props 传递给展示组件来做到这一点。我会在答案中为您添加一个示例。
  • 谢谢,太好了:-)
  • 我认为这是一个更广泛的话题,因为我们正在讨论整个 Redux 设置和示例组件,所以最后我们应该能够证明为什么我们真的需要一个像这样的状态管理库还原。也许您可以通过示例阅读 Redux 教程之一,然后回过头来询问 Redux 应用程序的特定部分。在这种情况下,我们非常乐意提供帮助。目前我看到有很多故事要讲,最终会成为一篇关于 Redux 的大文章。 :) 在这里查看一个很好的示例教程css-tricks.com/learning-react-redux

标签: reactjs


【解决方案1】:

是的,Redux(或任何状态管理库)是要走的路。例如,在 Redux 中,您有两种类型的组件:哑组件和高阶组件。高阶组件用于连接 Redux 状态(请参阅react-redux)。所以你可以将你的按钮实现为一个不依赖于 Redux 的哑组件,并在根组件中连接到 Redux

【讨论】:

  • 我对此很陌生,现在我请求一个很大的帮助,但你能举个简单的例子吗?例如,一个组件在同一个页面上使用了两次,而不是可以从另一个组件单独控制?
猜你喜欢
  • 2021-09-08
  • 2016-11-07
  • 2017-07-05
  • 2016-09-18
  • 1970-01-01
  • 2015-09-18
  • 1970-01-01
  • 1970-01-01
  • 2020-01-18
相关资源
最近更新 更多