React如何渲染对象数组？原生DOM创建25x25网格报错如何解决

你触发报错的核心原因是：使用document.createElement创建的是浏览器原生DOM对象，而非React可识别的JSX元素。React渲染逻辑仅支持JSX、字符串、数字、null、布尔值以及上述类型组成的数组，无法直接渲染原生DOM实例。

// 函数组件写法示例
import { useMemo } from 'react';

const Maze = () => {
  const gridContent = useMemo(() => {
    const rows = [];
    let count = 0; // 初始化你代码中缺失的count变量
    for (let i = 0; i < 25; i++) {
      const childNodes = [];
      for (let j = 0; j < 25; j++) {
        childNodes.push(
          <div
            key={`node-${i}-${j}`}
            className={`node node${(i * 10) * (j + 1)}`}
            id={`node${count}`}
          />
        );
        count++;
      }
      rows.push(
        <div
          key={`row-${i}`}
          className={`row row${i + 1}`}
          id={`row${i + 1}`}
        >
          {childNodes}
        </div>
      );
    }
    return rows;
  }, []);

  return <div className="maze">{gridContent}</div>;
};

export default Maze;

• React列表渲染必须为每一项添加唯一key属性，用于Diff算法优化，避免异常渲染
• React开发场景下不要手动调用document.createElement等原生DOM操作API，所有结构通过JSX语法声明即可，React会内部处理DOM的创建与更新
• 循环变量建议使用let/const声明，避免var变量提升带来的逻辑异常
• 如果使用类组件，将网格生成逻辑放到render方法内即可，逻辑与上述示例一致

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