ReactJs - 如何一次只保留一個“活動”部分

Question

我在為我的問題尋找解決方案或正確方向時遇到問題。 目前一旦你點擊 -> className="List-section"，它會顯示 -> className="Paragraph-container" 中的信息，但它有 4 個部分，我只想允許一個部分一次打開。 目前我可以打開所有這些並顯示出來。 如果有幫助，這里是原型的鏈接（以及流程應該如何）： https : //www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task?node-id=5%3A711&scaling=min-zoom&page -id=0%3A1&starting-point-node-id=5%3A509

提前感謝所有幫助！

父組件

function App() {
  const data = [
    {
      title: "Build test task",
      items: [
        "Create repositor",
        "Implement designs",
        "Implement functionality",
      ],
    },
    {
      title: "Submit your test task",
      items: [
        "Open email client",
        "Sent link information to careers@cornercasetech.com",
      ],
    },
    {
      title: "Participate in tech interview",
      items: ["Talk with HR", "Talk with Tech team"],
    },
    {
      title: "Reciece anster",
      items: ["Receive answers", "Start your IT career"],
    },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>CCT Lab Process</h1>
      </header>
      <div className="App-content">
      {data.map((dataObject, index) => (
        <ListItem key={index} listData={dataObject} listNumber={index + 1} />
      ))}
      </div>

    </div>
  );
}

子組件

function ListItem({ listNumber, listData }) {
  const [isShownOne, setIsShownOne] = useState(false);

  return (
    <div className="List">
      <div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
      {isShownOne && (
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

順便說一句，試圖用谷歌搜索所有可能的選項，但無法找到解決方案。 有人建議檢查父組件中的 id 並將邏輯傳遞給子組件。 此刻感覺有點失落！

Answer 1

將狀態提升到父組件中，並將其更改為數字。 該值表示哪個子項（如果有）是打開的。 然后將道具傳遞給每個孩子。

function App() {
  const [open, setOpen] = useState(-1);

  // ...
  {data.map((dataObject, index) => (
    <ListItem 
      key={index} 
      listData={dataObject} 
      listNumber={index + 1} 
      open={open === index}
      setOpen={setOpen}
    />
  ))}
}

function ListItem({ listNumber, listData, open, setOpen }) {
  // ...
  <div 
    className="List-section" 
    onClick={() => {
      setOpen(prev => {
        if (prev === listNumber - 1) {
          return -1;
        } else {
          return listNumber - 1;
        }
      })
    }}
  >
  // ...
  {open && (
    <div className="List-paragraph">
      {listData.items.map((paragraphItem, index) => (
        <div className="Paragraph-container" key={index}>
          <CheckedIcon  />
          <p className="Paragraph-item">{paragraphItem}</p>
        </div>
      ))}
    </div>
  )}
  </div>
}

你可能對這篇文章感興趣： https : //reactjs.org/docs/lifting-state-up.html