如何在 map 中将 React refs 用于功能组件？

Question

我有一个 map function 呈现一个 div 列表，这些 div 基于组件 state，所以它是动态的。 我需要在列表中的每个项目上放置一个参考，以便用户基本上可以按向上和向下按并从顶部开始遍历列表。

像这样的东西：

const func = () => {
 const item = items.map((i, index) => {
    return (
      <div ref={index}>{i.name}</div>
    )
  });
}

这一直很困难，因为似乎 refs 不像 state 那样它们可以根据动态数据进行更改。 它初始化一次并设置为常量。 但是我不知道要初始化什么，直到这个列表被渲染，我当然不能在 function 中调用 useRef 钩子，所以这里的解决方案是什么？

编辑：

好的，看来这个问题需要更多的背景信息：

我有一个下拉列表，它还允许用户搜索以过滤掉项目列表。 我想对其进行增强，以便当用户搜索时它专注于第一个元素并允许使用箭头键遍历元素列表。

当我试图专注于第一个元素时，我被卡住了，因为在呈现列表之前第一个元素不存在。 这个列表会根据用户输入的内容动态变化。那么，如果列表总是随着用户输入而变化，那么如何关注列表的第一个元素呢？

Answer 1

这可以在没有 refs 的情况下完成，所以它可能应该在没有 refs 的情况下完成。

您可以将当前焦点元素的索引放入 state 中。 每当显示的数据发生变化时，将索引重置为 0：

const [focusedElementIndex, setFocusedElementIndex] = useState(0);
useEffect(() => {
  setFocusedElementIndex(0);
}, [items]);
// using this approach,
// make sure items only gets a new reference when the length changes

渲染时，如果你需要知道焦点索引来改变元素样式，例如，只需将索引与 state 值进行比较：

<div class={index === focusedElementIndex ? 'focused' : ''}

并且有一个 keydown 侦听器，当按下相应的键时，它会增加或减少focusedElementIndex 。