通过 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中文网其他相关文章！
