reactjs - 如何使用 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>

如果我理解正确， use ref 只会抓取其中一个元素，所以我想最好的方法是动态地使不同的 useRefs 单独抓取？抱歉，刚学反应。

Answer 1

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

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

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>
)