React中如何在div容器内渲染指定数量嵌套行列结构的div网格？

你的问题核心是没有把列元素嵌套到行元素内部，且错误使用了dangerouslySetInnerHTMLAPI，正确实现逻辑和你jQuery的逻辑完全一致，都是外层循环生成行，内层循环生成列并嵌入当前行内。

以下是和你jQuery示例功能一致的5行10列网格实现代码：

class Grid extends React.Component {
  constructor(props) {
    super(props);
    // 行列数存在state中可支持后续动态修改
    this.state = {
      rowCount: 5,
      colCount: 10
    }
  };

  render() {
    const { rowCount, colCount } = this.state;
    return (
      <>
        <h1>Some Header</h1>
        <div id="board">
          {/* 外层循环生成行 */}
          {Array.from({ length: rowCount }).map((_, rowIndex) => (
            <div className="row" key={`row-${rowIndex}`}>
              {/* 内层循环生成当前行的列 */}
              {Array.from({ length: colCount }).map((_, colIndex) => (
                <div className="col" key={`col-${rowIndex}-${colIndex}`}></div>
              ))}
            </div>
          ))}
        </div>
      </>
    )
  }  
}

说明 #

• 用Array.from({length: 数量})可以快速生成指定长度的数组用于循环渲染，也可以替换为你熟悉的for循环先构建嵌套的行/列数组再传入渲染，逻辑完全一致
• 循环渲染的元素需要添加唯一key属性，避免React抛出性能警告
• 该实现完全不需要手动操作DOM，也不需要用到危险的dangerouslySetInnerHTML，符合React的声明式开发规范

之前方案的错误点 #

1. 提前单独生成行、列元素数组，没有做嵌套关联，导致列元素无法出现在行元素内部
2. dangerouslySetInnerHTML仅支持传入原生HTML字符串，你传入React元素对象时，会自动调用对象的toString()方法，因此渲染出[object Object]文本，该场景完全不需要使用这个API

内容的提问来源于stack exchange，提问作者StJungDev