reactjs - 反应中循环中的元素的useRef

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 传递给动画函数，一切正常；现在事情发生了一些变化，我使用地图创建了列表项，我不再能够正确地引用元素；我试过类似的东西：

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

但是我传递给动画函数的数组是空的（我猜是因为函数在 useEffect 钩子中被调用，而 LiRefs 还不是 useRef）我也知道

我会创建，所以我可以在开头声明它们，并用类似的东西来引用它们

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

哪个不起作用我可以尝试的任何其他解决方案？

Answer 1

问题

这将不起作用，因为每个渲染在menu映射时都会创建新的反应参考。

解决方案

使用 ref 保存生成的 ref 数组，并在映射时分配它们。

const lineRefs = React.useRef([]);

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

lineRefs稍后在映射 UI 时，附加存储在索引 i 处的反应 ref

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

Answer 2

我的是 React Hooks 版本。

useMemo为了性能起见，创建一个 refs 数组。

const vars = ['a', 'b'];
const childRefs = React.useMemo(
    () => vars.map(()=> React.createRef()), 
    [vars.join(',')]
);

React 会将每个 ref 挂载到childRefs

{vars.map((v, i) => {
    return (
        <div>
             <Child v={v} ref={childRefs[i]} />
             <button onClick={() => showAlert(i)}> click {i}</button>
        </div>
    )
 })
}

这是一个可行的演示，希望对您有所帮助。^_^

const Child = React.forwardRef((props, ref) => {

  React.useImperativeHandle(ref, () => ({
    showAlert() {
      window.alert("Alert from Child: " + props.v);
    }
  }));

  return <h1>Hi, {props.v}</h1>;
});

const App = () => {
  const vars = ['a', 'b'];
  const childRefs = React.useMemo(
    () => vars.map(()=> React.createRef()), 
    // maybe vars.length
    [vars.join(',')]
  );
  function showAlert(index) {
    childRefs[index].current.showAlert();
  }
  
  return (
    <div>
      {
        vars.map((v, i) => {
          return (
            <div>
              <Child v={v} ref={childRefs[i]} />
              <button onClick={() => showAlert(i)}> click {i}</button>
            </div>
          )
        })
      }
    </div>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 3

其他答案中可能存在一些 Typescript 不一致和复杂性。所以我认为将 useRef 钩子用于循环的最佳方法是：

// Declaration
const myRef = useRef([]);
myRef.current = [];
const addToRefs: (el) => void = (el) => {
  if (el && !myRef.current.includes(el)) {
    myRef.current.push(el);
  }
};

和

// Assignment (I will show an example for an input element)
...
...
{anyArrayForLoop.map((item, index) => {
   return (
       <input
           key={index}
           ref={addToRefs}
       />
   );
})}
...
...

最后：

// The Data
myRef.current // So you got em.