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}`]