在 Flux 架构中创建具有内部事件的可重用 React.js 组件
Creating a reusable React.js component with internal events in the Flux architecture
我正在按照以下视频中的 "containers and components" 方法在 Flux 架构中构建可重用组件。
React.js 2015 年大会（22 米 50 秒）：https://youtu.be/KYzlpRvWZ6c?t=22m50s
例如，我正在构建带有 'next' 按钮的图像滑块。
ImageSliderContainer
- 监听 ImageSliderStore 并维护状态（例如，currentIndex）
- 使用 props
渲染 ImageSlider
ImageSlider
- 无状态组件，仅基于 props 渲染
- 有一个子组件 NextButton
下一个按钮
- 无状态组件，仅基于 props 渲染
- 有onClick事件
在 Flux 架构中，单击 NextButton 将向商店发送一个操作。然后，商店将更新 "currentIndex" 并发出更改事件。在我看来，ImageSlider 不再可重用，因为它与单个容器紧密耦合，单个容器将被通知。
另一种选择是将状态 "currentIndex" 添加到 ImageSlider 组件。单击 NextButton 将通知 ImageSlider 更新其状态。但这会引入从 NextButton 到 ImageSlider 的反向数据流（违反 Flux 架构？）。此外，它违反了 "containers and components" 方法，在该方法中，组件仅使用 props 呈现 UI。
在 Flux 架构中制作可重用组件的最佳方法是什么？更具体地说，哪个元素（商店、容器、组件或其他元素）应该处理 NextButton 组件内发生的 onClick 事件？
已编辑
根据答案，这是一个同时满足 Flux 架构和 "containers and components" 模式的解决方案。
- 容器拥有状态"currentIndex."应用程序可能有多个容器，例如ScreenshotSliderContainer和DebugSliderContainer，每个容器维护自己的 "currentIndex."
- 容器将 onClick 处理程序作为道具传递给组件 ImageSlider。 onClick 处理程序向商店发送操作。
- ImageSlider 组件是无状态的，将 onClick 处理程序传递给子组件 NextButton.
- 因此，NextButton 中的 onClick 事件不会影响顶部组件 ImageSlider。只有容器使用新道具呈现 ImageSlider。
您可以将 onClick 事件处理程序作为道具传递，就像在反应教程中一样：
http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props
我正在按照以下视频中的 "containers and components" 方法在 Flux 架构中构建可重用组件。
React.js 2015 年大会（22 米 50 秒）：https://youtu.be/KYzlpRvWZ6c?t=22m50s
例如，我正在构建带有 'next' 按钮的图像滑块。
ImageSliderContainer
- 监听 ImageSliderStore 并维护状态（例如，currentIndex）
- 使用 props 渲染 ImageSlider
ImageSlider
- 无状态组件，仅基于 props 渲染
- 有一个子组件 NextButton
下一个按钮
- 无状态组件，仅基于 props 渲染
- 有onClick事件
在 Flux 架构中，单击 NextButton 将向商店发送一个操作。然后，商店将更新 "currentIndex" 并发出更改事件。在我看来，ImageSlider 不再可重用，因为它与单个容器紧密耦合，单个容器将被通知。
另一种选择是将状态 "currentIndex" 添加到 ImageSlider 组件。单击 NextButton 将通知 ImageSlider 更新其状态。但这会引入从 NextButton 到 ImageSlider 的反向数据流（违反 Flux 架构？）。此外，它违反了 "containers and components" 方法，在该方法中，组件仅使用 props 呈现 UI。
在 Flux 架构中制作可重用组件的最佳方法是什么？更具体地说，哪个元素（商店、容器、组件或其他元素）应该处理 NextButton 组件内发生的 onClick 事件？
已编辑
根据答案，这是一个同时满足 Flux 架构和 "containers and components" 模式的解决方案。
- 容器拥有状态"currentIndex."应用程序可能有多个容器，例如ScreenshotSliderContainer和DebugSliderContainer，每个容器维护自己的 "currentIndex."
- 容器将 onClick 处理程序作为道具传递给组件 ImageSlider。 onClick 处理程序向商店发送操作。
- ImageSlider 组件是无状态的，将 onClick 处理程序传递给子组件 NextButton.
- 因此，NextButton 中的 onClick 事件不会影响顶部组件 ImageSlider。只有容器使用新道具呈现 ImageSlider。
您可以将 onClick 事件处理程序作为道具传递，就像在反应教程中一样： http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props