React中如何通过父元素useRef修改指定子span的类名

你可以通过以下两种常见方式实现修改第二个span的类名：

方式一：使用DOM选择器querySelector #

利用querySelector结合CSS伪类选择器直接定位到第二个span（注意:nth-child是从1开始计数的）：

// 确保在组件挂载后执行，比如放在useEffect里
useEffect(() => {
  if (indexRef.current) {
    const secondSpan = indexRef.current.querySelector('span:nth-child(2)');
    // 直接替换所有类名
    secondSpan.className = 'new-class-name';
    // 更推荐用classList操作，避免覆盖原有类名
    secondSpan.classList.remove('active');
    secondSpan.classList.add('custom-class');
  }
}, []);

方式二：通过children属性获取子元素 #

indexRef.current指向的div元素的children属性是一个DOM元素集合，第二个span对应的索引是1（集合从0开始计数）：

useEffect(() => {
  if (indexRef.current) {
    const secondSpan = indexRef.current.children[1];
    // 切换类名（存在则移除，不存在则添加）
    secondSpan.classList.toggle('active');
  }
}, []);

注意事项 #

• 必须确保indexRef.current不为null，所以最好在组件挂载完成后（比如useEffect的空依赖数组回调）执行DOM操作，避免报错。
• 优先使用classList方法（add/remove/toggle）而不是直接赋值className，因为直接赋值会覆盖元素上所有已有的类名，灵活性更低。

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