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 <li ref={liRef} key={item} id={'myli' + item}>{item}</li>
      <button onClick={() => console.log(liRef.current)}>getRef</button>

但是结果不尽如人意

list.map(item => { return <li ref={getRef} key={item} id={'my-list-item' + item}>{item}</li> <button onClick={() => console.log(liRefList.current)}>getRefList</button>

得到想要的结果: