如何通过 React Hooks 对元素数组使用多个引用？

如何通过 Hooks 对元素数组使用多个引用？

简介

引用提供了一种方法访问 React 组件中的 HTML 元素。虽然您可以使用 refs 来管理单个元素，但在某些情况下您可能需要将 refs 应用到元素数组。本文探讨了如何在 React 中使用钩子实现元素数组的多个引用。

单个元素引用

对单个元素使用引用非常简单：

<code class="javascript">const elRef = useRef();
const [elWidth, setElWidth] = useState();

useEffect(() => {
  setElWidth(elRef.current.offsetWidth);
}, []);</code>

元素引用数组

将上述方法应用于元素数组将不起作用，因为它将相同的引用分配给所有元素。相反，我们需要创建一个引用数组并将它们单独分配给每个元素：

<code class="javascript">const itemsRef = useRef([]);

// Initialize the array of refs
useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);

// Use the array of refs in JSX
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 是对 HTML 元素的引用的数组。您可以通过索引数组来访问各个元素，例如 itemsRef.current[0].

以上是如何通过 React Hooks 对元素数组使用多个引用？的详细内容。更多信息请关注PHP中文网其他相关文章！