反應處理組件 onClick（一個打開，另一個關閉）

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-點節點id=5%3A509

提前感謝所有幫助！

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>
  );
}

Answer 1

我認為您在這里擁有的結構對於您正在尋找的這種行為並不是最佳的。

我建議做類似的事情：

 function ListItem({ listNumber, listData }) { const [currentSection, setCurrentSection] = useState(0); const totalSections = listData.items.length; const handleOpenSection = () => { const nextSection = currentSection === totalSections ? 0 : currentSection + 1; setCurrentSection(nextSection); } return ( <div className="List"> <div className="List-section" onClick={handleOpenSection} > <div className="Section-item">{listNumber}</div> <p className="Section-title">{listData.title}</p> </div> <div className="List-paragraph"> {listData.items.map((paragraphItem, index) => ( {currentSection === index && <div className="Paragraph-container" key={index}> <CheckedIcon /> <p className="Paragraph-item">{paragraphItem}</p> </div> } ))} </div> </div> ); }

當您處理 4 個部分時，不可能使用布爾值來實現此行為，因此此建議使用items數組中每個部分的位置來查看當時哪個部分處於打開狀態。

handleOpenSection函數只是一個看似合適的建議，因為您不希望currentSection大於您擁有的總節數。 此外，此代碼將顯示第一次渲染中的第一部分，這是您可能不希望發生的事情！

Answer 2

這是我從組件獲取數據並將邏輯傳遞給組件的地方。

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>
  );
}