React 获取循环列表 ref

[jtwang7]

React 获取循环列表 ref

参考文章：react获取循环列表的ref

使用场景

react 项目中有时会需要用到 ref 去获取节点的真实 dom 对象，在函数组件中官方推荐使用 useRef。 当前，我在渲染列表时想获取所有li的dom元素，同时将这些 dom refs 保存在一个 ref 列表中做相同的逻辑处理。

解决方案

利用 React 的 React.forward 以及回调ref。

import React, { useRef } from 'react';

export default function Demo() {
  const list = [1, 2, 3, 4, 5];
  const liRefList = useRef([]); // 保存 refs
  return (
    <ul>
      {
        list.map(item => {
          // (ref) => {xxx} : 回调ref
          return <li ref={(ref) => {liRefList.current.push(ref)}} key={item} id={'my-list-item' + item}>{item}</li>
        })
      }
    </ul>
  )
}