gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 15:36:57 24 4
gpt4 key购买 nike

我正在将我的基于 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 的示例,但这可能不是在功能组件中添加/删除类的方法?

最佳答案

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

Edit fervent-nobel-0fbof

关于reactjs - 功能组件中的 Refs 数组以通过 classList 更改单个项目的类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59411210/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com