反应成分组成

Question

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

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

幻灯片组件将幻灯片集合作为prop接收，并将currentSlide作为State。 slideNavigation 组件接收currentSlide，slides集合和setCurrentSlide回调作为props。

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

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

Answer 1

你应该为你的slidenavigation添加回调/道具，如：

onPrevSlideButtonClicked

onNextSlideButtonClicked

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

Answer 2

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

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

通过向slides组件发送道具来管理状态转换应该是父slideNavigation容器的工作，该组件将与下一个和上一个操作的按钮相关联。 / p>