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