Javascript 如何使用React.js和setActive激活单个div？

我目前正在创建一个应用程序，它有三个菜单选项卡，每个选项卡都由一个带有菜单标题和内容的手风琴表示。当前，单击标题时，内容div相对于框中的任何内容显示。我希望单击每个菜单标题，并使该菜单的content div独立显示，从而触发该特定div的活动状态

我创建的切换手风琴功能打开所有内容窗口。单击任何菜单标题时，将显示所有内容

这是我的函数，简化了：

function PlayerApp(props) {

  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");

  const content = useRef(null);

  function toggleAccordion() { 

    setActiveState(setActive === "" ? "active" : "");

    setHeightState(
      setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
    );
  }

  return (

  <div className="content"> 

    <div className="content-list">
      
       <div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
       <div className="accordion__text"> text content here </div>

       </div>
      </div>

      <div className="content-list">
        
        <div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
        <div className="accordion__text"> text here </div>

       </div>
      </div>

      <div className="content-list">

        <div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
        <div className="accordion__text"> text content her </div>

       </div>

      </div>

        <div className="content-title">
          <button className={`menu_title1 ${setActive}`} onClick={toggleAccordion}>
            <p className="accordion__title">Menu 1:</p>
            </button>
        </div>

          <div className="content-title">
          <button className={`menu_title2 ${setActive}`} onClick={toggleAccordion}>
            <p className="accordion__title">Menu 2:</p>
            </button>
        </div>
           <div className="content-title">
          <button className={`menu_title3 ${setActive}`} onClick={toggleAccordion}>
            <p className="accordion__title">Menu 3:</p>
            </button>
        </div>

        </div>

  );
}

export default PlayerApp;

function PlayerApp（道具）{
const[setActive，setActiveState]=useState（“”）；
常数[setHeight，setHeightState]=useState（“0px”）；
const content=useRef（null）；
函数toggleAccordion（）{
setActiveState（setActive==“”？“活动”：“”；
设置高度状态(
setActive==“active”？“0px”：“${content.current.scrollHeight}px`
);
}
返回(
此处的文本内容
此处文本
短信使她满意
菜单1:

菜单2:

菜单3:

);
}
导出默认PlayerApp；

尽管我的每个按钮类都有唯一的名称，但单击该类仍然会触发所有这些div的活动状态

---

如何更改我的函数，以便单击每个按钮为该手风琴窗口呈现唯一的响应？

您可以通过创建包含菜单详细信息的数组来实际清理代码

  const accordionItems = [
    { id: 'menu1', text: 'Menu 1' },
    { id: 'menu2', text: 'Menu 2' },
    { id: 'menu3', text: 'Menu 3' },
  ];
  const [activeItem, setActiveItem] = useState();

html将类似于

 {accordionItems.map((p, index) => {
          return (
            <div className="content-title">
              <button
                className={`menu_title1 ` + (activeItem === p.id ? 'active' : '')}
                onClick={() => {
                  setActiveItem(p.id);
                }}
              >
                <p className="accordion__title">{p.text}</p>
              </button>
            </div>
          );
        })}

{accordionItems.map（（p，索引）=>{
返回(
{
setActiveItem（p.id）；
}}
>
{p.text}
);
})}

我正在努力将它集成到我的代码中，并处理其他功能，当我尝试替换内容标题时，它似乎会从屏幕上消失