reactjs - useRef for element in loop in react

Question

使用 React，我有一个以这种方式静态声明的 ref 列表:

  let line1 = useRef(null);
  let line2 = useRef(null);
  let line3 = useRef(null);
  ...
  //IN MY RENDER PART
  <li ref={(el) => (line1 = el)}>line1</li>
  <li ref={(el) => (line2 = el)}>line1</li>
  <li ref={(el) => (line3 = el)}>line1</li>

然后将 refs 传递给动画函数，一切正常；
现在事情发生了一些变化，我使用 map 创建了列表项，但我不再能够正确引用该元素；
我试过这样的事情:

{menu.menu.map((D) => {
let newRef = createRef();
                    LiRefs.push(newRef);
                    return (
                      <li
                        key={D.id}
                        ref={(el) => (newRef = el)} >
                        {D.label}
                      </li>
                    );
                  })}

但是我传递给动画函数的数组是空的(我猜是因为该函数是在 useEffect 钩子(Hook)内部调用的，而 LiRefs 还不是 useRef)
我也知道

的号码我将创建，所以我可以在开始时声明它们，并使用类似的引用

ref={(el) => (`line${i}` = el)}

这不起作用
我可以尝试任何其他解决方案吗？

Answer 1

问题
当 menu 时，这不会在每次渲染时起作用被映射它会创建新的 react 引用。
解决方案
使用 ref 保存生成的 ref 数组，并在映射时分配它们。

const lineRefs = React.useRef([]);

lineRefs.current = menu.menu.map((_, i) => lineRefs.current[i] ?? createRef());

稍后在映射 UI 时，附加存储在 lineRefs 中的 react ref在索引 i

{menu.menu.map((D, i) => {
  return (
    <li
      key={D.id}
      ref={lineRefs.current[i]} // <-- attach stored ref
      {D.label}
    </li>
  );
})}