4

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

如果我尝试访问 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 的示例，但这可能不是在功能组件中添加/删除类的方法？

4

2 回答 2

3

代码几乎可以正常工作，您分配了一个带有.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'));

编辑 fervent-nobel-0fbof

于 2019-12-19T14:30:30.670 回答
0

尝试将 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>
  ));

于 2019-12-19T14:29:15.227 回答