我正在遵循以下视频中的“容器和组件”方法，以在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架构？） . 此外，它反对"containers and components"方法，其中组件只使用props呈现UI .
在Flux架构中制作可重用组件的最佳方法是什么？更具体地说，哪个元素（存储，容器，组件或其他东西）应该处理NextButton组件中发生的onClick事件？
编辑
根据答案，这里有一个满足Flux架构和“容器和组件”模式的解决方案 .
-
容器拥有状态"currentIndex."该应用程序可能有多个容器，如ScreenshotSliderContainer和DebugSliderContainer，每个容器都维护自己的"currentIndex."
-
容器将onClick处理程序作为prop传递给组件ImageSlider . onClick处理程序将一个动作发送到商店 .
-
ImageSlider组件是无状态的，将onClick处理程序传递给子组件NextButton .
-
因此，NextButton中的onClick事件不会影响顶级组件ImageSlider . 只有容器使用新的道具呈现ImageSlider .
1 回答
您可以将onClick事件处理程序作为prop传递，就像在反应教程中一样：http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props