如何在 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 。