如何使用 React Hooks 实现元素数组的多个引用？

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

问题：

如何使用 React hooks API 为元素数组实现多个引用？

背景：

对单个元素使用引用很简单，但将其扩展到数组元素需要不同的方法。

建议的解决方案：

由于钩子不能在循环中使用，因此需要自定义方法：

第 1 步：创建引用数组

首先创建一个将保存引用列表的 ref 对象。

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

第 2 步：访问元素引用

可以使用索引访问数组中的每个元素：

<code class="javascript">itemsRef.current[n] // nth element's ref</code>

第 3 步：在数组更改时更新引用数组

确保 ref 数组与元素数组保持同步。这可以在 useEffect 挂钩中完成：

<code class="javascript">useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);</code>

第 4 步：将引用分配给数组元素

创建元素时，为每个元素分配适当的引用:

<code class="javascript">props.items.map((item, i) => (
  <div
    key={i}
    ref={el => itemsRef.current[i] = el}
    style={{ width: `${(i + 1) * 100}px` }}
  >
    ...
  </div>
));</code>

按照以下步骤，您可以成功地对带有钩子的元素数组使用多个引用。

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