React动态修改类名：如何为数组渲染元素添加新类名？

首先直接回答你的问题：你写的element.className={'selected'}这种方式是行不通的，而且这种直接操作DOM的思路也不符合React的设计理念，我来一步步给你拆解问题和解决方案：

为什么你的代码不能正常工作？ #

• document.getElementsByClassName()返回的是一个HTMLCollection（DOM元素集合），不是单个元素，你需要通过索引（比如element[0]）才能拿到具体的DOM节点，直接给集合赋值className肯定无效。
• 你在组件的return里直接调用loopFun()，这会导致组件每次渲染都执行这个函数，而且此时DOM可能还没完成挂载，根本找不到对应的元素。
• React是状态驱动UI的框架，直接手动操作DOM会破坏React的虚拟DOM同步机制，很容易出现UI和状态不一致的问题。

正确的React实现方式：用状态管理类名 #

我们应该通过React的状态来控制元素的类名，而不是直接操作DOM。下面是修改后的完整代码示例：

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {
  const colors = ['Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'];
  // 用状态存储选中的索引，默认没有选中项
  const [selectedIndex, setSelectedIndex] = useState(-1);

  // 如果你需要在组件挂载后自动遍历选中（比如依次选中每个元素）
  useEffect(() => {
    let index = 0;
    const interval = setInterval(() => {
      setSelectedIndex(index);
      index = (index + 1) % colors.length;
    }, 1000); // 每1秒切换选中项

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  // 如果是点击选中，就写一个点击事件处理函数
  // const handleSelect = (index) => {
  //   setSelectedIndex(index);
  // };

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p 
          key={i} 
          // 动态拼接类名：如果当前索引是选中的，就加上selected类
          className={`title-${i} ${selectedIndex === i ? 'selected' : ''}`}
          // 如果是点击选中，就绑定点击事件
          // onClick={() => handleSelect(i)}
        >
          {color}
        </p>
      ))}
    </div>
  );
};

render(<App />, document.getElementById('root'));

代码说明： #

• 用useState创建selectedIndex状态，用来记录当前选中的元素索引。
• 使用useEffect来处理组件挂载后的自动遍历逻辑（如果你的需求是自动切换选中项），通过定时器更新selectedIndex，实现循环选中的效果。
• 在渲染<p>标签时，通过模板字符串动态生成className：当当前元素的索引等于selectedIndex时，就添加selected类名，否则只保留基础类名。
• 如果你的需求是点击元素来切换选中，只需要注释掉定时器部分，启用点击事件处理函数即可。

这种方式完全遵循React的状态驱动思想，不需要手动操作DOM，UI会自动随着状态的变化而更新，既简洁又可靠。

内容的提问来源于stack exchange，提问作者lomine