通过 Hooks 对元素数组使用多个引用
useRef 钩子提供对 React 组件中元素的持久引用。它允许您直接访问和修改 DOM 元素。对于单个元素，使用 useRef 很简单。但是，如果您想对元素数组使用多个引用怎么办？
问题
考虑以下代码：
<code class="js">const { useRef, useState, useEffect } = React;
const App = () => {
const elRef = useRef();
const [elWidth, setElWidth] = useState();
useEffect(() => {
setElWidth(elRef.current.offsetWidth);
}, []);
return (
<div>
{[1, 2, 3].map(el => (
<div ref={elRef} style={{ width: `${el * 100}px` }}>
Width is: {elWidth}
</div>
))}
</div>
);
};
ReactDOM.render(
<App />,
document.getElementById("root")
);</code>此代码将导致错误，因为 elRef.current 不是数组。它是对数组中第一个元素的引用。
使用外部引用的解决方案
此问题的可能解决方案是使用外部引用来保留多个元素的跟踪。下面是一个示例：
<code class="js">const itemsRef = useRef([]);
const App = (props) => {
useEffect(() => {
itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);
return props.items.map((item, i) => (
<div
key={i}
ref={el => (itemsRef.current[i] = el)}
style={{ width: `${(i + 1) * 100}px` }}
>
...
</div>
));
};</code>在本例中，itemsRef.current 是一个数组，其中保存对数组中所有元素的引用。您可以使用 itemsRef.current[n].
注意： 重要的是要记住钩子不能在循环内使用。因此，在循环外部使用 useEffect 钩子来更新 itemsRef 数组。
以上是如何对元素数组使用带有钩子的多个引用？的详细内容。更多信息请关注PHP中文网其他相关文章！
