功能组件中的 Refs 数组，用于通过 classList 更改各个项目的类名

Question

我正在将基于 jQuery 的项目转换为 React，并在功能组件中遇到引用问题：我有一个巨大的单词列表，每个单词都应该通过它们自己的引用进行访问，以便我可以根据用户的内容更改单独的类名正在打字（我可以使用一个巨大的状态对象来完成它，但性能会受到影响）。

如果我尝试访问引用的类列表，它是未定义的。现在我不确定 classList 在功能组件中通常不可用，或者 refs 是否未正确初始化：

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(() => {
  wordsRef.current[0].classList.add('highlight');
});

...

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

错误：无法读取未定义的属性“add”。

我只能找到 classList 的示例，但这可能不是在功能组件中添加/删除类的方法？

Answer 1

该代码几乎可以正常工作，您分配了一个带有.current属性的引用，只需将其更改为：

wordsRef.current[0].current.classList

但你应该以其他方式处理它：

ref={el => (wordsRef.current = [...wordsRef.current, el])

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const words = ['Many', 'Words'];

const App = () => {
  const wordsRef = useRef([]);

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

  useEffect(() => {
    console.log(wordsRef);
    console.log(wordsRef.current[0].classList);
  });

  return <div>{displayWords}</div>;
};

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