我有一个映射函数，它呈现一个div列表，这些div是基于组件状态的，所以它是动态的。我需要在列表中的每个项目上放置一个ref，这样用户基本上可以向上按和向下按，并从顶部开始遍历列表。
类似这样的东西：
const func = () => {
const item = items.map((i, index) => {
return (
<div ref={index}>{i.name}</div>
)
});
}
这很困难，因为裁判似乎不像是一个可以根据动态数据进行改变的状态。它初始化一次并设置为常量。但在这个列表呈现之前，我不知道该将其初始化为什么，当然我也不能在函数中调用useRef钩子，那么这里的解决方案是什么？
编辑：
好吧，看来这个问题还需要更多的背景：
我有一个下拉列表，它还允许用户搜索以筛选出项目列表。我想对它进行增强，这样当用户搜索时，它会集中在第一个元素上，并允许使用箭头键遍历元素列表。
当我试图把注意力集中在第一个元素上时，我陷入了困境，因为在列表呈现之前，第一个元素并不存在。这个列表会根据用户键入的内容动态更改。那么，如果列表总是随着用户的键入而更改，您如何关注列表的第一个元素呢？
这可以在没有refs的情况下完成，所以可能应该在没有ref的情况下进行。
您可以将当前关注的元素的索引置于状态。每当显示的数据发生变化时，将索引重置为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
例如，在渲染时，如果需要知道焦点索引以更改元素样式，只需将索引与状态值进行比较：
<div class={index === focusedElementIndex ? 'focused' : ''}
并且有一个keydown监听器，当按下适当的键时，它会递增或递减focusedElementIndex。