3

我将按照以下视频中的“容器和组件”方法在 Flux 架构中构建可重用组件。

React.js Conf 2015 (22m 50s): https://youtu.be/KYzlpRvWZ6c?t=22m50s

例如，我正在构建一个带有“下一步”按钮的图像滑块。

ImageSliderContainer

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

图像滑块

  • 无状态组件，只是基于 props 渲染
  • 有一个子组件NextButton

下一个按钮

  • 无状态组件，只是基于 props 渲染
  • 有 onClick 事件

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

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

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

已编辑

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

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

1 回答 1

6

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

于 2015-03-26T10:27:31.573 回答