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

对带有 Hook 的元素数组使用多个引用

问题陈述：
虽然对带有 Hook 的单个元素使用 ref 是简单地说，在处理元素数组时，这会变得更加复杂。

实现：
要使用钩子实现元素数组的多个引用，我们可以利用 useRef 钩子如下：

<code class="js">const App = () => {
  const itemsRef = useRef([]);//create a ref instance for array

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, props.items.length);
  }, [props.items]);//update the `itemsRef` array on any change of `props.items`

  return props.items.map((item, i) => (
    <div
      key={i}
      // pass the element ref to the `itemsRef` array
      ref={el => (itemsRef.current[i] = el)}
      style={{ width: `${(i + 1) * 100}px` }}
    >
      ...
    </div>
  ));
};</code>

用法：
使用这种方法，您可以通过 itemsRef.current[index] 访问数组中的元素。与问题中的示例不同，这可以确保在数组更改时正确更新引用。

附加说明：

• 因为钩子不能在循环中，useEffect 钩子用于在 ​​props.items 更改导致重新渲染时更新 itemsRef 数组。
• slice() 方法确保 itemsRef 数组仅包含与当前 props 对应的元素。项目数组。

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