react hook 为循环出来的多个子组件添加ref

react hook 为循环出来的多个子组件添加ref

在React函数组件中，可以使用useRef钩子来获取当前组件的标签（DOM元素）。

• 父组件

  const details = useState([{name:'A'},{name:'B'},{name:'C'}])
  const bodyRefs = useRef({});

  // 把ref挂载在循环出来的子组件
  {
  details.map((e) => (
  <childComponents bodyRefs ={bodyRefs} info={info} key={e.name} />
  ))
  }

• 子组件

  // 拿到父组件给的bodyRefs 把每个子组件塞进去

  bodyRefs.current[info.name] = ele} />

最终获取到的bodyRefs

console.log(bodyRefs.current)

{
	A: ...对应绑定DOM元素，
	B: ...对应绑定的DOM元素，
	C: ...对应绑定的DOM元素
}

使用

bodyRefs.current[`${设置对应的name}`]