如何使用钩子管理 React 中元素数组的多个引用？

使用 Hooks 对元素数组进行多个引用

在 React 中，useRef 钩子允许开发人员管理对元素的 DOM 引用。通常，引用用于访问单个元素。但是，这种方法可能不适合元素数组。

要使用钩子处理元素数组的多个引用，需要稍微不同的方法。让我们考虑以下情况：

<code class="javascript">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>
  );
};</code>

在此示例中，我们尝试通过简单地将相同的 elRef 传递给数组中的每个元素来创建多个引用。但是，这种方法将导致仅引用最后一个元素。

为了解决此问题，我们可以利用以下技术：

<code class="javascript">const App = props => {
  const itemsRef = useRef([]);
  // you can access the elements with itemsRef.current[n]

  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数组来保存引用。我们用一个空数组初始化该数组。在 useEffect 中，我们更新 itemsRef 数组以匹配 props.items 数组的长度。这确保了数组中的每个项目都有对应的引用。

现在，我们可以使用 itemsRef.current[n] 访问各个元素引用，其中 n 是数组中元素的索引。

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