Reactjs React-动态地修改类名

我正在从和数组中添加文本元素，我喜欢循环遍历这些元素并更新claas名称

我正在选择具有当前类名的元素，并且还想添加新的类名

可以添加新的类名吗

element.className={'selected'} 

=

import React，{Component，useState，useffect}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
常量应用=（）=>{
常量颜色=[
“红色”、“绿色”、“蓝色”、“棕色”、“黄色”、“黑色”
]
常量loopFun=（）=>{
for（设i=0；i(
{color}
))}
{loopFun（）}
);
}
render（，document.getElementById（'root'））；

const element=document.getElementsByClassName（'test-'+i）

这不应该是：

const element=document.getElementsByClassName（'title-'+i）[0]

然后再加上：

element.classList.add('selected')

然而，在react中直接操作dom元素被认为是不好的做法。您应该使用

useRef

hook对虚拟dom进行操作

编辑：

const-App=（）=>{
常量颜色=[
“红色”、“绿色”、“蓝色”、“棕色”、“黄色”、“黑色”
]
常量loopFun=（）=>{
for（设i=0；i{
loopFun（）；
}, []);
返回(
{colors.map（（color，i）=>(
{color}
))}
);
}

---

如果您已经在

map

中这样做了，我不太清楚为什么您需要一个额外的函数来循环所有元素。另外，像这样在渲染中调用

loopFun

是一种不好的做法，在某些点上很可能会导致无限循环错误，例如，如果您正在动态修改颜色的数量

相反，当映射到

颜色时，可以添加所需的类：

return (
    <div className="titles">
      {colors.map((color, i) => {
        const itemClass = `title${i} selected`;
        return (
          <p key={i} className={itemClass}>
            {color}
          </p>
        );
      })}
    </div>
  );

返回(
{colors.map（（color，i）=>{
const itemClass=`title${i}selected`；
返回(

{color}

);
})}
);

我还建议查看库，这样可以更容易地在React中操作类名。
I get“无法读取未定义的属性”add'-ahhh当然应该是
const-element=document.getElementsByClassName（'title-'+I）[0]
我已经尝试过了，但是我得到了未定义的'Cannot read property'classList'-哦，天哪，我又坏了。你不能从组件内部调用
loopFun（）
函数！你只能在它挂载后才可以这样做！要做到这一点，你应该将函数放在
useffect（）中
。查看编辑。我正在尝试创建一种淡入淡出类型carosel，以便颜色（在示例中）淡入淡出。
return (
    <div className="titles">
      {colors.map((color, i) => {
        const itemClass = `title${i} selected`;
        return (
          <p key={i} className={itemClass}>
            {color}
          </p>
        );
      })}
    </div>
  );