react动态ref

### 动态 Ref 的创建与使用 在 React 中，`ref` 是一种用于访问 DOM 节点或 React 元素实例的机制。对于动态 `ref` 的处理，通常涉及到多个组件或者列表项中的元素。 #### 使用回调函数方式创建动态 ref 为了确保每次渲染都能正确地获取到最新的 DOM 元素，可以采用回调形式来设置 `ref` 属性。这种方式允许开发者在一个特定的时间点捕获并存储对实际 DOM 节点的引用。例如： ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.refs = []; } handleRef = (element) => { if (element && !this.refs.includes(element)) { this.refs.push(element); } }; render() { const items = ['item1', 'item2', 'item3']; return ( <ul> {items.map((item, index) => <li key={index} ref={(el) => this.handleRef(el)}> {item} </li> )} </ul> ); } } ``` 这种方法利用了 `map()` 函数遍历数组的同时为每一个 `<li>` 设置了一个唯一的 `key` 值，并通过匿名箭头函数作为 `ref` 回调[^2]。 #### 利用 `useRef` 钩子批量初始化 refs 数组 除了类组件外，在函数式组件中也可以借助于 `useRef` 来管理一组 `refs`。考虑到性能优化以及避免不必要的重复声明问题，推荐预先分配好所需数量的 `ref` 实例而不是每次都重新构建它们。下面是一个例子展示如何高效地完成这一目标： ```javascript import React, { useRef } from 'react'; function ListItems({ data }) { // 初始化一个固定长度的 refs 数组 const itemRefs = useRef( Array(data.length).fill(null).map(() => React.createRef()) ); useEffect(() => { // 当数据变化时重置 refs 数组大小 while(itemRefs.current.length !== data.length){ if(itemRefs.current.length<data.length){ itemRefs.current.push(React.createRef()); }else{ itemRefs.current.pop(); } } }, [data]); return ( <ul> {data.map((item, idx) => ( <li key={idx} ref={itemRefs.current[idx]}> {item.name} </li> ))} </ul> ); } export default ListItems; ``` 这里展示了如何根据传入的数据集自动调整 `refs` 数量以匹配显示项目的数目[^3]。