在反应式js中处理功能组件的风格

Question

我正在使用一个功能组件，并创建了一个侧栏菜单结构，与父子方式（一种下拉）。因此，当我点击父类时，一个活动类应该被切换，并在其下一个元素上切换style> display> noneblock。

        <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";
       }
     });
   }
 },[]);

无论在哪里，我有类有孩子的元素，我必须切换一个类的活动，并在其下一个兄弟姐妹，想添加样式attr与显示。

Answer 1

当使用像react这样的框架，不直接操作DOM时，不建议这样改变风格，你应该做的是要么与类一起工作，要么在react中切换它们，而不是使用 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组合器的内容 此处