显示/隐藏在React中出现多次的组件的最佳方法？

Question

我正在进行飞行搜索系统。我有4个字段（Origin，Destiny，Departure Date，Return Date）。例如，当用户点击“where”输入时，我会显示与机场的div（见图片）。

我有一个减速器来控制div的状态打开/关闭，如下所示：

window.alert()

这对我来说很好，但是现在我想让用户再添加一个搜索，所以不是一行包含字段，而是可以有多少用户需要。

问题是，如果他点击例如日期选择器输入，日期选择器div off所有日期选择器输入将不仅出现他点击的那个。发生这种情况是因为我只有一个属性来控制隐藏/显示状态。

我的疑问是，处理它的最佳方法是什么？继续使用redux？在隐藏/显示和停止使用redux的组件内保持一个状态？

Answer 1

取决于您定义多个searchRows的位置/方式。

您还将这些多个searchRows存储在redux

中

当您在redux中存储多个searchRows时，您还可以在redux中存储这些打开/关闭状态并将其绑定到行。这样你的下拉状态就在行的状态

之内

{
  searchRows: {
    one: {
      showDatePicker: 'none',
      showDestinyPicker: 'none',
      showOriginPicker: 'none',
    },
    two: {
      showDatePicker: 'none',
      showDestinyPicker: 'none',
      showOriginPicker: 'none',
    }
  }
}

您手动渲染这些多个searchRows

如果您手动渲染多个searchRows

   return (
      <SearchRow someProps={ ... } />
      <SearchRow someProps={ ... } />
   )

然后您还应该保持每个组件中的状态，并且SearchRow组件应该控制其下拉列表的状态。