添加活动类 On react with out state 并使用 JS dom 切换答案

【问题标题】：add active class On react with out state and toggle using JS dom添加活动类 On react with out state 并使用 JS dom 切换
【发布时间】：2021-12-20 13:56:13
【问题描述】：

我正在尝试使用 JS dom 在 React 中添加活动类，但它对我不起作用请帮助寻找解决方案。请给出一个完整的解决方案，其中包含代码并稍微解释一下，因为我觉得我在处理 Dom 时很困惑

<FilterOrder>
   <div className=""  onClick={ActiveClass}> Today      </div>
   <div className=""  onClick={ActiveClass}> Yesterday  </div>
   <div className=""  onClick={ActiveClass}> This Week  </div>

我的功能 =>

const ActiveClass=(e)=>{
const active=e.target.classList;
const prevActive=document.getElementsByClassName("Active");
prevActive.forEach((e)=>console.log("hello"));
active.classList.add("Active");
}

错误 =>

【问题讨论】：

标签： javascript reactjs dom

【解决方案1】：

DOM 突变在 React 中是非常反模式的。使用 React refs 来访问底层 DOMNode，或者只是使用一些本地状态以 React 方式切换类名。

这就是说，错误是由getElementsByClassName返回一些不是实际Array的集合引起的，它返回一个HTMLCollection，这是一个类似数组的结构。

没有可以调用的forEach 方法。如果您想要/需要迭代返回的元素，可以使用Array.from。

const ActiveClass = (e) => {
  const active = e.target.classList;
  const prevActive = document.getElementsByClassName("Active");

  Array.from(prevActive).forEach((e) => console.log("hello"));

  active.classList.add("Active");
}

【讨论】：