使用Flux体系结构中的内部事件创建可重用的React.js组件

Question

我正在遵循以下视频中的“容器和组件”方法，以在Flux架构中构建可重用的组件。

React.js Conf 2015（22m 50s）：https://youtu.be/KYzlpRvWZ6c?t=22m50s

---

例如，我正在使用“下一步”按钮构建图像滑块。

ImageSliderContainer

• 收听 ImageSliderStore 并维护状态（例如，currentIndex）
• 使用道具
渲染 ImageSlider

ImageSlider

• 无状态组件，仅基于道具进行渲染
• 有一个子组件 NextButton

Next按钮

• 无状态组件，仅基于道具进行渲染
• 有onClick事件

---

在Flux架构中，单击 NextButton 将向商店发送操作。然后，商店将更新“currentIndex”并发出更改事件。在我看来， ImageSlider 不再可重复使用，因为它与单个商店紧密耦合，通过该商店将通知单个容器。

另一个选项是将状态“currentIndex”添加到 ImageSlider 组件。单击 NextButton 将通知 ImageSlider 更新其状态。但这会引入从 NextButton 到 ImageSlider 的反向数据流（违反Flux架构？）。此外，它反对“容器和组件”方法，其中组件只使用props呈现UI。

在Flux架构中制作可重用组件的最佳方法是什么？更具体地说，哪个元素（商店，容器，组件或其他东西）应该处理 NextButton 组件中发生的onClick事件？

---

被修改

根据答案，这里有一个满足Flux架构和“容器和组件”模式的解决方案。

• 容器拥有状态“currentIndex”。该应用程序可能有多个容器，例如 ScreenshotSliderContainer 和 DebugSliderContainer ，每个容器都维护自己的“currentIndex”。
• 容器将onClick处理程序作为prop传递给组件 ImageSlider 。 onClick处理程序将一个动作发送到商店。
• ImageSlider 组件是无状态的，将onClick处理程序转移到子组件 NextButton 。
• 因此， NextButton 中的onClick事件不会影响顶级组件 ImageSlider 。只有容器使用新道具呈现 ImageSlider 。

Answer 1

您可以将onClick事件处理程序作为prop传递，就像在react教程中一样： http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props