React函数组件用Ref数组改className遇classList未定义问题

先分析你遇到的报错原因 #

你看到的Cannot read property 'add' of undefined错误，主要有两个核心原因：

1. Ref访问方式错误：你用createRef()创建的Ref是一个容器对象，实际的DOM元素存在它的.current属性里，但你的代码直接写了wordsRef.current[0].classList，漏掉了内层的.current——相当于你在操作createRef对象而非真实DOM元素，自然找不到classList。
2. DOM挂载时机问题：你的useEffect没有设置依赖项，会在组件每次渲染时执行，第一次执行时DOM可能还未完成挂载，此时wordsRef.current[0].current是null，同样会触发报错。

另外要明确：函数组件完全支持通过Ref操作DOM的classList，这个功能不受组件类型限制，只是你没正确使用Ref而已。

修复后的基础版代码 #

先直接修正你的原有代码，解决报错问题：

import { useRef, useEffect } from 'react';

// ...

const wordsRef = useRef([...Array(1000)].map(() => createRef())); 

const displayWords = words.map((word, index) => ( 
  <React.Fragment key={index}> 
    <span ref={wordsRef.current[index]} > {word} </span>{' '} 
  </React.Fragment> 
)); 

useEffect(() => { 
  // 用可选链避免DOM未挂载的情况，同时补上内层的.current
  wordsRef.current[0].current?.classList.add('highlight');
}, []); // 空依赖数组，确保只在组件挂载后执行一次

return ( 
  <div className={classes.root}> {displayWords} </div> 
);

更优的Ref管理方式：使用回调Ref #

上面的方式虽然能解决问题，但嵌套的.current有点繁琐，推荐用回调Ref直接存储DOM元素，代码更简洁直观：

import { useRef, useEffect } from 'react';

// ...

// 初始化空数组，不需要提前创建createRef
const wordsRef = useRef([]); 

const displayWords = words.map((word, index) => ( 
  <React.Fragment key={index}> 
    <span 
      // 回调Ref会在元素挂载时自动把DOM元素存入数组对应位置
      ref={el => wordsRef.current[index] = el}
    > 
      {word} 
    </span>{' '} 
  </React.Fragment> 
)); 

useEffect(() => { 
  // 直接访问数组里的DOM元素，无需嵌套.current
  if (wordsRef.current[0]) {
    wordsRef.current[0].classList.add('highlight');
  }
}, []); 

return ( 
  <div className={classes.root}> {displayWords} </div> 
);

关于“函数组件中修改类名的正确方式”的思考 #

你担心大型状态对象导致性能下降，所以选择用Ref操作DOM，这个思路是没问题的，但要分场景选择方案：

• 如果只是少量元素需要切换类名，更推荐用React的状态驱动方式，这更符合React的数据流设计，性能开销也很小（React只会重新渲染类名变化的元素）：

  import { useState } from 'react';
  
  // ...
  
  const [highlightIndex, setHighlightIndex] = useState(0);
  
  const displayWords = words.map((word, index) => ( 
    <React.Fragment key={index}> 
      <span 
        className={index === highlightIndex ? 'highlight' : ''}
      > 
        {word} 
      </span>{' '} 
    </React.Fragment> 
  ));
  

• 如果是大量元素频繁切换类名，且状态方案确实导致性能瓶颈，那么用Ref直接操作DOM是合理的优化手段，就是你现在尝试的方向。

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