React新手求助：ReactDom.render无输出，index.html应如何正确配置？

嘿，我来帮你搞定这个问题～ 你遇到的核心问题有两个：一是index.html缺少完整的HTML文档结构，二是你的index.js里监听了一个不存在的game事件，导致ReactDOM.render根本没执行。

一、正确的index.html结构 #

哪怕教程里看起来只有一个div，那也是简化展示，实际浏览器需要完整的HTML结构才能正确解析页面。这里给你两种常见的写法：

情况1：自己引入React/ReactDOM（非Create React App项目） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
    <!-- 引入React和ReactDOM的开发版CDN资源 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
    <!-- 你的目标挂载DOM元素 -->
    <div id="game"></div>
    <!-- 把JS文件放在body末尾，确保DOM元素先加载完成 -->
    <script src="./index.js"></script>
</body>
</html>

情况2：Create React App项目（你用npm start大概率是这个） #

Create React App会自动处理HTML模板的打包注入，你只需要确保public/index.html里有目标div即可，完整结构参考：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="game"></div>
    <!-- Create React App会自动注入打包后的JS，无需手动引入 -->
  </body>
</html>

二、修正你的index.js代码 #

你现在的代码监听了game事件，但这个事件从来没有被触发过，所以ReactDOM.render根本没执行，自然看不到输出。另外，React 18之后推荐用createRoot代替旧版的ReactDOM.render，这里给你两种适配写法：

写法1：监听DOM加载完成事件（通用所有版本） #

// 等待整个DOM树加载完成后再执行渲染
document.addEventListener('DOMContentLoaded', function() {
  // React 17及之前版本写法
  ReactDOM.render("sss", document.getElementById('game'));
  
  // React 18+ 推荐写法
  // const root = ReactDOM.createRoot(document.getElementById('game'));
  // root.render("sss");
});

写法2：直接执行代码（适合JS放在body末尾的场景） #

因为script放在body末尾时，前面的DOM元素已经加载完毕，所以可以直接写渲染逻辑：

// React 17及之前
ReactDOM.render("sss", document.getElementById('game'));

// React 18+
// const root = ReactDOM.createRoot(document.getElementById('game'));
// root.render("sss");

三、关键注意点 #

• 永远确保JS代码在目标DOM元素之后加载，或者用DOMContentLoaded事件等待DOM就绪，这样就不会再出现"Target is not a DOM element"错误。
• 不要监听自定义事件（比如game）除非你明确知道这个事件会被触发，否则代码永远不会执行。

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