react js中功能组件中的处理样式

Question

我正在使用一个功能组件，并创建了一个侧边栏菜单结构，带有父子方式（下拉菜单）。因此，当我单击父级时，应该切换一个活动类，并在其下一个元素切换样式>显示>无/块。

        <Fragment key={index}>
          <button
            className='dropdown-btn bg-transparent haschild'
            style={{ border: 'none' }}
          >
            {data.name} <i className='fas fa-chevron-right'></i>
          </button>
          <div 
            className='dropdown-container'>
            <Content
              config={menuItem.children}
              children={true}
            />
          </div>
        </Fragment>

关于使用效果

useEffect(() => {
   var dropdown = document.getElementsByClassName("haschild");
   var i;
   for (i = 0; i < dropdown.length; i++) {
     dropdown[i].addEventListener("click", function () {
       this.classList.toggle("active");
       var dropdownContent = this.nextElementSibling;
       if (dropdownContent.style.display == "none") {
         dropdownContent.style.display = "block";
       } else {
         dropdownContent.style.display = "none";
       }
     });
   }
 },[]);

我上课的地方都有孩子 在那个元素上，我必须激活一个类 并在其下一个兄弟姐妹上，想要添加带有显示的样式属性

Answer 1

当使用像 react 这样不直接操作 DOM 的框架时，不建议这样更改样式。 相反，您应该做的是使用类并在反应中切换它们，而不是使用document.getElementsByClassName 或类似函数。

这可能看起来像这样，具体取决于您的需要：

const ToggleButton = () => {
  const [active, setActive] = useState(false);
  return (
    <button onClick={() => setActive(prev => !prev)} className={active ? 'active' : 'inactive'}>
      Toggle active
    </button>

  );
};

此组件将呈现一个按钮，单击该按钮可在 active 和 inactive 类之间切换。其余的可以而且也许应该用纯 CSS 来完成。

~ 等现代 CSS 组合符可用于影响以下元素。您可以阅读有关 CSS 组合器的更多信息here