React开发小游戏时为何仍出现“Target container is not a DOM element.”错误

嘿，这个问题我之前开发React小游戏时也踩过一模一样的坑！咱们先把问题根源理清楚：当ReactDOM.render()执行时，它找不到你指定的那个DOM容器元素——说白了就是document.getElementById('game')返回了null，自然就会抛出这个错误。

结合你给出的代码来看，index.html里确实有<div id="game"></div>，那问题大概率出在脚本的加载顺序上，下面给你几个靠谱的解决方案：

方案1：把脚本放在DOM容器之后加载 #

如果你的index.js是直接在HTML中引入的，一定要把脚本标签放在<div id="game"></div>的后面，也就是<body>标签的末尾。这样浏览器会先渲染出DOM容器，再执行React代码，自然就能顺利找到目标元素了。示例HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>你的小游戏</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <!-- 先渲染DOM容器 -->
  <div id="game"></div>
  <!-- 再加载React脚本 -->
  <script src="./index.js"></script>
</body>
</html>

方案2：等待DOM完全加载后再执行渲染 #

如果因为项目结构限制没法调整脚本位置，那可以把ReactDOM.render()的代码包裹在DOMContentLoaded事件监听里，确保DOM完全构建完成后再执行渲染操作。修改你的index.js：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 你的组件定义保持不变
let x=1;
let y=1;
class Pool extends React.Component {
  render() {
    return(
      <div>
        <p>aaa</p>
      </div>
    );
  }
}
class Board extends React.Component {
  func(i,j){
    return <p>dfsdf</p>;
  }
  render() {
    return(
      <Pool />
    );
  }
}
class Game extends React.Component {
  render() {
    return (
      <div>
        <Board />
      </div>
    );
  }
}

// 等待DOM加载完成后再执行渲染
document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render( <Game /> ,document.getElementById('game'));
});

方案3：检查脚手架默认容器ID（若使用Create React App等工具） #

如果你是用Create React App这类脚手架创建的项目，默认的DOM容器ID是root（也就是public/index.html里的<div id="root"></div>）。如果你自己改成了game，一定要确保index.html里的容器ID和index.js里getElementById的参数完全一致，别拼写错哦！

优先试试方案1，这是最直接的解决办法，一般都能搞定这个问题～

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