多个元素的动态反应切换按钮

Question

我需要在反应状态下用 true/false 切换多个块，但 true 和 false 同时适用于所有块。

import { useState } from "react";
...
const [toggleThisElement, setToggleThisElement] = useState(false);
...

{
    data.map((d, id) => {
        return (
            <div className="single-history" key={id}>
                <div className="h-head">
                    click this div for toggle h-info block
                </div>

                <div className="h-info">toggling block</div>
            </div>
        )
    })
}

Answer 1

目前，所有切换项目共享相同的状态。为了避免这种情况，创建一个单独的组件来切换逻辑，ToggleItem如下所示。

import { useState } from "react";

const ToggleItem = ({ discription, id }) => {
  const [toggleThisElement, setToggleThisElement] = useState(false);
  return (
    <div className="single-history" key={id}>
      <button
        className="h-head"
        onClick={() => setToggleThisElement((prev) => !prev)}
      >
        click this btn for toggle h-info block {id}
      </button>

      {toggleThisElement && <div className="h-info">{discription}</div>}
    </div>
  );
};

export default function App() {
  const data = ["first", "second", "third"];

  return (
    <>
      {data.map((d, id) => {
        return <ToggleItem id={id} discription={d} />;
      })}
    </>
  );
}