如何在二维循环中为div创建Ref

reactjs react-hooks ref

在这里，我试图将ref属性传递给div，但它没有发生，有人能帮我解决这个问题吗


 const ref = useRef<HTMLDivElement>(null);

 for (let curRow = 1; curRow <= props.row; curRow++) {
    for (let curCol = 1; curCol <= props.col; curCol++) {
      columns.push(
        <div
          ref={ref}
          style={{ minWidth: `${minWidth}px` }}
          className="el1"
          id={`${curRow}${curCol}}`}
          key={`${curRow}${curCol}${generateKey(curCol)}`}
        >{`${curRow}${curCol}`}</div>
      );
    }
  }```
✅ 最佳回答：

如果希望对所有div使用ref，则不能使用单个ref，您需要一个ref数组或一个2d数组。例如：

const refs = useRef<(HTMLDivElement | null)[][]>([]);

for (let curRow = 0; curRow < props.row; curRow++) {
  for (let curCol = 0; curCol < props.col; curCol++) {
    columns.push(
      <div
        ref={(el) => {
          refs.current[currRow] = refs.current[currRow] || [];
          refs.current[currRow][currCol] = el;
        }}
        style={{ minWidth: `${minWidth}px` }}
        className="el1"
        id={`${curRow}${curCol}}`}
        key={`${curRow}${curCol}${generateKey(curCol)}`}
      >{`${curRow}${curCol}`}</div>
    );
  }
}

// used like:
useEffect(() => {
  console.log("Element at zero/zero: ", refs.current[0][0]);
}, []);

本站已为你智能检索到如下内容，以供参考：

🐻 相关问答 5 个

如何对循环中的相同组件使用ref？ for循环中的DBT ref 在循环中创建不同大小的二维数组 在v-for循环中增加并使用reactive ref VBA-Excel-Redim循环中的二维数组

🐬 推荐阅读 4 个

认识 div 标签 ☝️一个<div>。很多可能性。 ReactJS的原因绑定 实用的 reactjs 插件

本文支持英文版本，如需查看请 点击这里 ！

(查看英文版本获取更加准确信息)