React 组件组成

Question

我尝试使用 react 构建一个简单的幻灯片放映（我正在学习 react），并且对组件组成/信息流有疑问。

我有一个 slides 组件，它有两个子组件。一个子组件 slideContainer 显示幻灯片，另一个组件 slideNavigation 显示导航按钮（后退/下一个）。

slides 组件接收幻灯片集合作为道具，并将 currentSlide 作为状态。 slideNavigation 组件接收 currentSlide、slides 集合和 setCurrentSlide 回调作为 props。

slideNavigation 组件根据单击的按钮、幻灯片集合和 currentSlide 确定新的 currentSlide。使用 callBack 将新的 currentSlide 返回到 slides 组件。 slides 组件相应地更新状态并将其传递给显示组件，该组件显示新幻灯片。请参阅下面的 slides 组件的代码。

我的问题：在导航组件中确定新的 currentSlide 似乎有点奇怪，传递回其父级，父级再次将其传递给它刚刚来自的导航组件。我做错了什么，组件是否正确组合？？

Answer 1

您应该在幻灯片导航中添加回调/道具，例如：

onPrevSlideButtonClicked

onNextSlideButtonClicked

然后在您的父组件中，您将为每个事件添加回调并计算新幻灯片（因为这是您所有信息的存储位置）。

Answer 2

您可以进行的唯一更改是将新幻灯片的确定从slideNavigation 移动到父slides 组件。

slides 组件应该持有状态并负责管理它。它包含 2 个哑子组件，slideContainer 和 slideNavigation。这些子组件应该对正在发生的事情一无所知； Container 应该只显示它​​从父级接收到的内容，并且导航应该只返回发生的事件（下一个和上一个按钮单击）

父级 slides 容器的工作应该是通过将 props 向下发送到 slideNavigation 组件来管理状态转换，该组件将绑定到下一个和上一个操作的按钮。