reactjs - 功能组件中的 Refs 数组以通过 classList 更改单个项目的类名

Question

我正在将我的基于 jQuery 的项目转换为 react 并遇到功能组件中的 refs 问题:我有一个巨大的词表，每个词都应该通过它们自己的 ref 访问，以便我可以根据用户的内容更改各个 classNames正在打字(我可以用一个巨大的状态对象来完成，但性能会受到影响)。

如果我尝试访问 ref 的类列表，则它未定义。现在我不确定 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>
  );

错误:无法读取未定义的属性“添加”。

我只能找到带有 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'));