react获取循环列表的ref

react 项目中有时会需要用到ref去获取节点的真实dom对象，在函数组件中官方推荐使用useRef 我在渲染列表时想获取所有li的dom元素，根据官方文档中的demo，我写出了下面的代码，点击button时打印ref的值 import React, { useRef } from 'react'; export default function Demo() { const list = [1, 2, 3, 4, 5]; const liRef = useRef(); return (

{ list.map(item => { return
• {item}
}) } console.log(liRef.current)}>getRef

) } 但是结果不尽如人意 image.png 搜索了许久，返现标签的ref属性，可以传入函数，在函数中自定义接受逻辑，于是改进了代码： import React, { useRef } from 'react'; export default function Demo() { const list = [1, 2, 3, 4, 5]; const liRef = useRef(); const liRefList = useRef([]) function getRef(dom) { liRefList.current.push(dom) } return (

{ list.map(item => { return
• {item}
}) } console.log(liRef.current)}>getRef { list.map(item => { return
• {item}
}) } console.log(liRefList.current)}>getRefList

) } 得到想要的结果： image.png

本文章由javascript技术分享原创和收集