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

Question

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

如果我尝试访问 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>
  );

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

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

Answer 1

尝试将 wordsRef 声明为一个空数组，当您在 map 函数中分配一个新的 ref 时，使用 ref 参数推送一个新的 ref 通过传播运算符到您的数组。

const wordsRef = useRef([]);

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

Answer 2

代码几乎可以正常工作，您使用 .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'));

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

Array of Refs in functional component to change classnames of individual items via classList

ref

reactjs

react-hooks

react-functional-component