如何修改React代码以解决appendChild空指针错误

错误原因 #

1. 原代码在组件函数执行阶段就调用document.getElementById('container')，此时JSX还未挂载到DOM，导致container为null，调用appendChild触发报错。
2. 存在语法错误：circlesArr.forEach((15, i) => { cols.forEach(...) })参数格式错误，且未定义cols变量。
3. 直接操作原生DOM不符合React的状态驱动范式，容易引发DOM同步问题。

修复后的完整代码 #

React组件代码 #

import { useState } from 'react';

const CircleSpread = () => {
  // 存储每个圆形的激活状态，15x15的二维数组
  const [circleStates, setCircleStates] = useState(
    Array(15).fill().map(() => Array(15).fill(false))
  );

  const growCircles = (i, j) => {
    // 边界判断：超出网格范围直接返回
    if (i < 0 || i >= 15 || j < 0 || j >= 15) return;
    // 已激活的圆形不再重复处理
    if (circleStates[i][j]) return;

    // 标记当前圆形为激活状态
    setCircleStates(prev => {
      const updated = [...prev];
      updated[i] = [...updated[i]];
      updated[i][j] = true;
      return updated;
    });

    // 100ms后触发上下相邻圆形的扩散
    setTimeout(() => {
      growCircles(i - 1, j);
      growCircles(i + 1, j);
    }, 100);

    // 300ms后取消当前圆形的激活状态
    setTimeout(() => {
      setCircleStates(prev => {
        const updated = [...prev];
        updated[i] = [...updated[i]];
        updated[i][j] = false;
        return updated;
      });
    }, 300);
  };

  return (
    <div className="container">
      {/* 循环生成15x15的圆形网格 */}
      {Array(15).fill().map((_, rowIdx) => (
        <React.Fragment key={rowIdx}>
          {Array(15).fill().map((_, colIdx) => (
            <div
              key={`${rowIdx}-${colIdx}`}
              className={`circle ${circleStates[rowIdx][colIdx] ? 'grow' : ''}`}
              onClick={() => growCircles(rowIdx, colIdx)}
            />
          ))}
        </React.Fragment>
      ))}
    </div>
  );
};

export default CircleSpread;

CSS样式 #

.container {
    display: flex;
    flex-wrap: wrap;
    width: 450px;
}
.circle {
    background-color: #5295F1;  
    height: 14px;
    width: 14px;
    transition: transform 0.3s linear;
    margin: 2px; /* 添加间距避免缩放时圆形重叠 */
}
.circle.grow {
    transform: scale(2);
}

关键修改点 #

• 用React状态替代DOM操作：通过useState管理每个圆形的激活状态，状态变化自动触发组件重渲染，避免手动修改DOM class。
• JSX生成网格：完全用React的方式渲染圆形元素，替代原生document.createElement和appendChild，从根源避免DOM未挂载的问题。
• 修复语法错误：移除原代码中错误的forEach循环，直接在JSX循环中绑定点击事件。
• 优化边界判断：在扩散函数开头直接检查索引是否越界，逻辑更简洁可靠。

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