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 把每个子组件塞进去
<div 
	ref={ele=> bodyRefs.current[info.name] = ele} 
/>

最终获取到的bodyRefs

console.log(bodyRefs.current)

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

使用

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