当一个元素的ref改变时，React会重新渲染它(参照相等/ "triple-equals"检查)。

这里的大多数答案都没有考虑到这一点。更糟糕的是:当父对象渲染并重新初始化ref对象时，所有子对象都将重新渲染，即使它们是记忆的组件(React。PureComponent或React.memo)!

下面的解决方案没有不必要的重新渲染，使用动态列表，甚至没有引入实际的副作用。无法访问未定义的引用。ref在第一次读取时初始化。之后，它保持参考稳定。

const useGetRef = () => {
  const refs = React.useRef({})
  return React.useCallback(
    (idx) => (refs.current[idx] ??= React.createRef()),
    [refs]
  )
}

const Foo = ({ items }) => {
  const getRef = useGetRef()
  return items.map((item, i) => (
    <div ref={getRef(i)} key={item.id}>
      {/* alternatively, to access refs by id: `getRef(item.id)` */}
      {item.title}
    </div>
  ))
}

警告:当项目随着时间的推移而缩小时，未使用的引用对象将不会被清理。当React卸载一个元素时，它会正确地设置ref[i]。Current = null，但“空”引用将保留。

通过将子元素移动到单独的组件中，可以避免数组引用与useEffect结合带来的复杂性。这还有其他优点，主要是可读性强，易于维护。

const { useRef, useState, useEffect } = React;

const ListComponent = ({ el }) => {
  const elRef = useRef();
  const [elWidth, setElWidth] = useState();

  useEffect(() => {
    setElWidth(elRef.current.offsetWidth);
  }, []);

  return (
    <div ref={elRef} style={{ width: `${el * 100}px` }}>
      Width is: {elWidth}
    </div>
  );
};

const App = () => {

  return (
    <div>
      {[1, 2, 3].map((el, i) => (
        <ListComponent key={i} el={el} />
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

当一个元素的ref改变时，React会重新渲染它(参照相等/ "triple-equals"检查)。

这里的大多数答案都没有考虑到这一点。更糟糕的是:当父对象渲染并重新初始化ref对象时，所有子对象都将重新渲染，即使它们是记忆的组件(React。PureComponent或React.memo)!

下面的解决方案没有不必要的重新渲染，使用动态列表，甚至没有引入实际的副作用。无法访问未定义的引用。ref在第一次读取时初始化。之后，它保持参考稳定。

const useGetRef = () => {
  const refs = React.useRef({})
  return React.useCallback(
    (idx) => (refs.current[idx] ??= React.createRef()),
    [refs]
  )
}

const Foo = ({ items }) => {
  const getRef = useGetRef()
  return items.map((item, i) => (
    <div ref={getRef(i)} key={item.id}>
      {/* alternatively, to access refs by id: `getRef(item.id)` */}
      {item.title}
    </div>
  ))
}

警告:当项目随着时间的推移而缩小时，未使用的引用对象将不会被清理。当React卸载一个元素时，它会正确地设置ref[i]。Current = null，但“空”引用将保留。

更新

新React文档显示了一个使用地图的推荐方法。

点击这里查看测试版(2022年12月)

有两种方法

对多个当前元素使用一个引用

const inputRef = useRef([]);

inputRef.current[idx].focus();

<input
  ref={el => inputRef.current[idx] = el}
/>

const {useRef} = React; const App = () => { const list = [...Array(8).keys()]; const inputRef = useRef([]); const handler = idx => e => { const next = inputRef.current[idx + 1]; if (next) { next.focus() } }; return ( <div className="App"> <div className="input_boxes"> {list.map(x => ( <div> <input key={x} ref={el => inputRef.current[x] = el} onChange={handler(x)} type="number" className="otp_box" /> </div> ))} </div> </div> ); } ReactDOM.render(<App />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

使用ref的数组 正如上面的帖子所说，不建议这样做，因为官方指南(以及内部棉绒检查)不允许它通过。 不要在循环、条件或嵌套函数中调用hook。相反，总是在React函数的顶层使用Hooks。通过遵循此规则，您可以确保在每次组件呈现时以相同的顺序调用hook。 然而，由于这不是我们目前的情况，下面的演示仍然可以工作，只是不推荐。

const inputRef = list.map(x => useRef(null));

inputRef[idx].current.focus();

<input
  ref={inputRef[idx]}
/>

const {useRef} = React; const App = () => { const list = [...Array(8).keys()]; const inputRef = list.map(x => useRef(null)); const handler = idx => () => { const next = inputRef[idx + 1]; if (next) { next.current.focus(); } }; return ( <div className="App"> <div className="input_boxes"> {list.map(x => ( <div> <input key={x} ref={inputRef[x]} onChange={handler(x)} type="number" className="otp_box" /> </div> ))} </div> </div> ); } ReactDOM.render(<App />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

假设您的数组包含非原语，您可以使用WeakMap作为Ref的值。

function MyComp(props) {
    const itemsRef = React.useRef(new WeakMap())

    // access an item's ref using itemsRef.get(someItem)

    render (
        <ul>
            {props.items.map(item => (
                <li ref={el => itemsRef.current.set(item, el)}>
                    {item.label}
                </li>
            )}
        </ul>
    )
}

我们不能使用state，因为我们需要在render方法被调用之前ref是可用的。 我们不能任意多次调用useRef，但可以只调用一次:

假设arr是一个道具数组:

const refs = useRef([]);
// free any refs that we're not using anymore
refs.current = refs.current.slice(0, arr.length);
// initialize any new refs
for (let step = refs.current.length; step < arr.length; step++) {
    refs.current[step] = createRef();
}