最简单和最有效的方法是根本不使用useRef。只需使用一个回调ref，在每次渲染时创建一个新的ref数组。

function useArrayRef() {
  const refs = []
  return [refs, el => el && refs.push(el)]
}

Demo

<div id="root"></div> <script type="text/babel" defer> const { useEffect, useState } = React function useArrayRef() { const refs = [] return [refs, el => el && refs.push(el)] } const App = () => { const [elements, ref] = useArrayRef() const [third, setThird] = useState(false) useEffect(() => { console.log(elements) }, [third]) return ( <div> <div ref={ref}> <button ref={ref} onClick={() => setThird(!third)}>toggle third div</button> </div> <div ref={ref}>another div</div> { third && <div ref={ref}>third div</div>} </div> ); } ReactDOM.render(<App />, document.getElementById("root")); </script> <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

我使用useRef钩子创建我想独立控制的数据面板。首先我初始化useRef来存储一个数组:

import React, { useRef } from "react";

const arr = [1, 2, 3];

const refs = useRef([])

在初始化数组时，我们观察到它实际上是这样的:

//refs = {current: []}

然后我们应用map函数来创建面板，使用我们将引用的div标签，将当前元素添加到我们的引用中。带有一个按钮的当前数组:

arr.map((item, index) => {
  <div key={index} ref={(element) => {refs.current[index] = element}}>
    {item}
    <a
      href="#"
      onClick={(e) => {
        e.preventDefault();
        onClick(index)
      }}
    >
      Review
    </a>
})

最后一个函数接收按下按钮的索引，我们可以控制我们想要显示的面板

const onClick = (index) => {
  console.log(index)
  console.log(refs.current[index])
}

最后，完整的代码是这样的

import React, { useRef } from "react";

const arr = [1, 2, 3];

const refs = useRef([])
//refs = {current: []}

const onClick = (index) => {
  console.log(index)
  console.log(refs.current[index])
}

const MyPage = () => {
   const content = arr.map((item, index) => {
     <div key={index} ref={(element) => {refs.current[index] = element}}>
       {item}
       <a
         href="#"
         onClick={(e) => {
           e.preventDefault();
           onClick(index)
         }}
       >
         Review
       </a>
   })
   return content
}

export default MyPage

这对我很管用!希望这些知识对你有用。

以上所有其他选项都依赖于数组，但这使得事情非常脆弱，因为元素可能会重新排序，然后我们就不跟踪ref属于哪个元素了。

React使用键道具来跟踪项目。因此，如果你按键存储你的引用，就不会有任何问题:

const useRefs = () => {
  const refs = useRef<Record<string,HTMLElement | null>>({})

  const setRefFromKey = (key: string) => (element: HTMLElement | null) => {
    refs.current[key] = element;
  }

  return {refs: refs.current, setRefFromKey};
}

const Comp = ({ items }) => {
  const {refs, setRefFromKey} = useRefs()

  const refsArr = Object.values(refs) // your array of refs here

  return (
    <div>
      {items.map(item => (
        <div key={item.id} ref={setRefFromKey(item.id)}/>
      )}
    </div>
  )
}

请注意，React在卸载一个项目时，将使用null调用所提供的函数，该函数将在对象中将匹配的键项设置为null，因此所有内容都将是最新的。

由于不能在循环中使用钩子，这里有一个解决方案，以便在数组随时间变化时使其工作。

我想数组来自于道具:

const App = props => {
    const itemsRef = useRef([]);
    // you can access the elements with itemsRef.current[n]

    useEffect(() => {
       itemsRef.current = itemsRef.current.slice(0, props.items.length);
    }, [props.items]);

    return props.items.map((item, i) => (
      <div 
          key={i} 
          ref={el => itemsRef.current[i] = el} 
          style={{ width: `${(i + 1) * 100}px` }}>
        ...
      </div>
    ));
}

我们不能使用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();
}

假设您的数组包含非原语，您可以使用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>
    )
}