顯示/隱藏在React中多次出現的組件的最佳方法？

Question

我正在做一個航班搜索系統。 我有4個字段（來源，目的地，出發日期，返回日期）。 例如，當用戶單擊“ where”輸入時，我將顯示一個包含機場的div（見圖）。

我有一個reducer來控制div的狀態打開/關閉，像這樣：

const initialState = fromJS({
  showDatePicker: 'none',
  showDestinyPicker: 'none',
  showOriginPicker: 'none',
});

那對我來說很好用，但是現在我想允許用戶再添加一個搜索，因此我可以有多少用戶想要，而不是一行。

問題是，例如，如果他單擊日期選擇器輸入，則所有日期選擇器輸入中的日期選擇器div不僅會顯示他單擊的那個。 發生這種情況是因為我只有一個屬性來控制隱藏/顯示狀態。

我的疑問是，最好的解決方法是什么？ 繼續使用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組件應控制其下拉菜單的狀態。