react获取循环列表的ref
作者: 图恩分类: 编程开发阅读: 1710发布时间: 2020-07-04 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}
})
}
)
}
但是结果不尽如人意
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}
})
}
{
list.map(item => {
return - {item}
})
}
)
}
得到想要的结果:
image.png
发表评论 (审核通过后显示评论):