如何在 React 中使用活动状态来操作 div？

Question

我正在尝试用三个手风琴制作菜单 windows。所有数据都使用数组存储在功能组件中，我的目标是使用活动状态分别触发 individual windows 的打开。

到目前为止，这是我的代码：

const Accordion = () => {

 const accordionItems = [
    { id: 'menu1', text: 'text from the first menu' },
    { id: 'menu2', text: 'text from the second menu' },
    { id: 'menu3', text: 'text from the third menu' },
  ];

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

    const content = useRef(null);

    function toggleAccordion() { 

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

     setHeightState(
       setActive === "active" ? "0px" : `100px`
    );  
   }

   return (
      <div class ="my_list"> 
         {accordionItems.map((p, index) => {
            return (
               <div className="accordion__section">
                <button
                  className={`accordion ` + (activeItem === p.id ? 'active' : '')}
                  onClick={() => {
                  setActiveItem(p.id);
                  toggleAccordion();
                }}>
                <p className="accordion__title">{p.id}</p>  
                </button>   
       
              <div ref={content}  style={{ maxHeight: `${setHeight}` }} className= 
              {"accordion__content "  + (activeItem === p.id ? 'active' : '')}> 

              <div className="accordion__text"> {p.text} </div>

             </div>
            </div>
          );
        })}
     </div>
    )
};

正如您在上面的代码中看到的，我有一个简单的 activeItem 状态，其功能嵌入到按钮 class 以及内容中。这在隔离 divs 添加简单样式到我的 css 文件中的活动 class 方面工作正常。

我的问题是找到一种方法来触发单个 div 上的 ToggleAccordion() 函数，该函数处于活动状态，因为它代表我所有的手风琴 windows 都在打开和关闭，无论至于我点的那个

我试图将 setActive 和 activeItem 变量复合到同一个变量中，但我想不出一个解决方案既不会失去 windows 开头或 css 我之前提到的样式。我的预感是toggle函数内部的setActive和setActiveSate需要引用activeItem。

如有任何帮助或建议，我们将不胜感激。

谢谢p.s也知道反应

Answer 1

按照您当前构建此项目的方式，您需要引用活动项目是完全正确的。

我会完全删除 [setActive, setActiveState] 和 [setHeight, setHeightState] 因为你可以通过更改 activeItem.

来控制一切

根据地图中 activeItem 的 id，您可以判断手风琴是否打开。我会尝试这样的事情：

<div 
  ref={content}
  style={{ maxHeight: `${activeItem === p.id ? "100px" : "0px" }` }}
  className={"accordion__content "  + (activeItem === p.id ? 'active' : '')}
>

然后为了处理您的手风琴被取消选择，更新您的 onClick 来自：

onClick={() => {
  setActiveItem(p.id);
  toggleAccordion();
}}

对此：

onClick={() => {
  setActiveItem(activeItem === p.id ? '' : p.id);
}}

您可以完全摆脱您的 toggleAccordion() 功能。在上面更新的 onClick 中，您正在检查当前 ID 是否与您单击的 ID 相同，如果是则将其删除（取消选择所有手风琴），如果它不是活动手风琴，则它成为新的活动手风琴。

如何在 React 中使用活动状态来操作 div？

How to manipulate a div using Active States in React?

javascript

reactjs

gatsby

react-hooks