映射数组并获取 refs.current 数组答案

【问题标题】：Mapping array and getting array of refs.current映射数组并获取 refs.current 数组
【发布时间】：2021-04-25 06:48:00
【问题描述】：

所以我在 jsx 中映射对象数组以创建类别，这些类别是我页面上的部分。看起来是这样的

{categories.map(category => (
        <div className="single-category" key={category.id}>
          content of single category
        </div>
      ))}

我的目标是获取每个类别的 refs.current 数组，所以我可以将它传递给我的另一个组件，即类别导航栏，感谢 offsetTop 我可以将它与 window.offsetY 进行比较并在导航栏中给出相应的类别CSS 中的活动类。我认为这是可能的，但我不知道如何正确地做到这一点。任何人都可以帮忙吗？感谢您的帮助:)

【问题讨论】：

您想在屏幕上显示类别时设置特殊类别吗？
这能回答你的问题吗？ How can I use multiple refs for an array of elements with hooks?
不是 100%，我得到了我想要的数组，但是在第一次渲染时，我的数组是空的屏幕上的类别
@Filippo854 你能告诉我们你尝试了什么以及你正在尝试做什么（即同时显示你设置边框底部等的代码）？这将更容易找到问题。

标签： javascript reactjs

【解决方案1】：

如果您在功能组件中，只需声明一个包含引用的新变量并分配您想要引用的 dom 元素，例如：ref={myRef}

const myRef = React.useRef(null)




  return (
     {categories.map(category => (
    <div className="single-category" key={category.id} ref={myRef} >
      content of single category
    </div>
  ))}
)

然后您可以将 myRef.current 传递给您想要的组件如果您在类组件中，请使用 React.createRef 而不是 useRef

【讨论】：

是的，当我有 1 个要提供 ref 的元素时有效，但在我的情况下，我映射了一个对象数组，我需要给每个对象一个 ref
抱歉我的仓促回复