13. React 在循环中创建 ref

需求：有一个数组， 当用 map 遍历数组时，希望对数组中的每一项都返回一个 input 元素，且对每个 input 都创建一个 ref 用于获取对应的 dom 节点

方法一

• 创建一个 ref 数组
• 在遍历结果数组时，ref 属性可以是一个函数，直接将 dom 节点插入到数组中
• inputRefs.current[i] = dom 可以改成 inputRefs.current.push(dom) ```tsx const inputRefs = useRef([])

return results.map((item, i) => (

<a name="zvAcy"></a>
### 方法二
- 先创建一个 ref 数组
- 遍历结果数组，给 ref 数组创建对应数量的子 ref
- 再次遍历结果数组，将结果数组中的子项 ref 与 ref 数组中的子 ref 关联
-  `??` 是空值合并运算符，当左侧为 null 或 undefined 时返回右侧运算值
```tsx
import { createRef, MutableRefObject, useRef } from 'react'
const component:React.FC = () => {
  const inputRefs = useRef<MutableRefObject<HTMLInputElement>>[]>([])
  inputRefs.current = HistoryStore.list.map(
    (element, i) => inputRefs.current[i] ?? createRef()
  )
  return (
    <>
    results.map((item, i) => (
      <div key={i}>
        <input type="text" ref={ inputRefs.current[i] }/>
        <button onClick={ () => handleCopy(inputRefs.current[i].current) }>复制</button>
      </div>
    ))
    </>
  )
}

参考