基础ReactDOM.render示例无内容显示问题求助

1. 先查浏览器控制台错误 #

打开页面后按F12调出开发者工具，切到「控制台」标签看报错——这是定位空白页问题最直接的办法。常见报错可能有：

• 文件路径错：index.js没和index.html放同一目录，导致加载失败
• 依赖加载失败：CDN链接无法访问
• JSX编译失败：babel版本和React不兼容

2. 修正依赖版本兼容性 #

你用的babel-standalone@6版本太老，和React 17存在兼容问题，建议替换成高版本：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

3. 确认文件路径与加载顺序 #

• 保证index.js和index.html在同一个文件夹里，避免路径错误
• 确保React、ReactDOM、babel的加载顺序正确：先加载React核心库，再加载ReactDOM，最后加载babel，这样才能正常编译JSX

修正后的完整代码参考 #

index.html #

<html>
<head>
  <link rel="stylesheet" href="index.css">
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script src="index.js" type="text/babel"></script>
</body>
</html>

index.js #

ReactDOM.render(<p>Hi, my name is Bob!</p>, document.getElementById("root"))

额外验证方案 #

如果改完还是空白，试试把JSX代码直接写在index.html的<script>标签里，排除文件加载问题：

<script type="text/babel">
  ReactDOM.render(<p>Hi, my name is Bob!</p>, document.getElementById("root"))
</script>

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