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

您可以使用父元素来获得一堆子元素。

在我的情况下，我试图得到一串输入在我的表单元素，然后我得到的形式元素，并使用它来处理所有的输入。

就像这样:

function Foo() {
    const fields = useRef<HTMLFormElement>(null);

    function handlePopUp(e) {
      e.preventDefault();
    
      Array.from(fields.current)
        .forEach((input: HTMLInputElement | HTMLTextAreaElement) => {
          input.value = '';
        });
    }

    return (
    <form onSubmit={(e) => handlePopUp(e)} ref={fields}>

      <input
        placeholder="Nome"
        required
        id="name"
        type="text"
        name="name"
      />
      <input
        placeholder="E-mail"
        required
        id="email"
        type="email"
        name="email"
      />
      <input
        placeholder="Assunto"
        required
        id="subject"
        type="text"
        name="subject"
      />
      <textarea
        cols={120}
        placeholder="Descrição"
        required
        id="description"
        name="description"
      />

      <button type="submit" disabled={state.submitting}>enviar</button>
    </form>  
    );
}

您可以使用数组(或对象)来跟踪所有的引用，并使用方法向数组添加ref。

注意:如果你添加和删除引用，你必须在每个渲染周期清空数组。

import React, { useRef } from "react";

const MyComponent = () => {
   // intialize as en empty array
   const refs = useRefs([]); // or an {}
   // Make it empty at every render cycle as we will get the full list of it at the end of the render cycle
   refs.current = []; // or an {}

   // since it is an array we need to method to add the refs
   const addToRefs = el => {
     if (el && !refs.current.includes(el)) {
       refs.current.push(el);
     }
    };
    return (
     <div className="App">
       {[1,2,3,4].map(val => (
         <div key={val} ref={addToRefs}>
           {val}
         </div>
       ))}
     </div>
   );

}

工作示例 https://codesandbox.io/s/serene-hermann-kqpsu

以上所有其他选项都依赖于数组，但这使得事情非常脆弱，因为元素可能会重新排序，然后我们就不跟踪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，因此所有内容都将是最新的。

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

如果我理解正确的话，useEffect应该只用于副作用，因此我选择使用useMemo。

const App = props => {
    const itemsRef = useMemo(() => Array(props.items.length).fill().map(() => createRef()), [props.items]);

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

然后如果你想操纵物品/使用副作用，你可以这样做:

useEffect(() => {
    itemsRef.map(e => e.current).forEach((e, i) => { ... });
}, [itemsRef.length])