如何使用 useRef 抓取多个映射元素？

Question

在这里，我映射了一个对象数组，其中包含要在页面上显示的图像。在我尝试 useRef 的那一刻，它只抓住了最后一个元素。我怎样才能拥有它，以便我的 useRef 抓住我多个？

  <div className='images-container'>
             {skills.map((skill, idx) => {
                    return <div key={idx}>
                        <img alt={skill.name} ref={imageRef} src={skill.url} />
                        <p>{skill.name}</p>
                    </div>
                })}
            </div>

如果我理解正确，使用 ref 只会抓取其中一个元素，所以我想最好的方法是动态地使不同的 useRef 单独抓取？不好意思，刚学react。

Answer 1

最佳解决方案：不要使用您可能不需要的引用。如果您告诉我们您认为需要参考的原因，我们可以验证您是否正确。

其次，创建一个与你的技能列表长度相同的引用数组。一个 ref 只能指向一个对象。您正在做的是将相同的 refs 放置在许多对象上，这不是 refs 设计的工作方式。

const refs = [];
for (let i = 0; i < skills.length; i++) {
    refs.push(useRef());
}
return (
  <div className='images-container'>
             {skills.map((skill, idx) => {
                    return <div key={idx}>
                        <img alt={skill.name} ref={refs[idx]} src={skill.url} />
                        <p>{skill.name}</p>
                    </div>
                })}
            </div>
)

如何使用 useRef 抓取多个映射元素？

How can I grab multiple mapped elements using useRef?

reactjs

react-hooks

react-hooks-testing-library

use-ref