求助：React组件在localhost无法渲染Hello World至指定div

架构老林

2026-5-22

解决React渲染Hello World无内容显示的问题

嘿，我来帮你排查这个问题！看了你的描述和代码，核心问题已经很明显啦：

你说要把内容渲染到名为header的div中，但你的渲染代码里写的是document.getElementById('root')——这两个id不匹配，React找不到目标容器，自然没法渲染内容。

给你几个具体的解决步骤：

1. 匹配容器元素的ID

两种选择二选一就行：

要么把HTML里的目标容器id改成root，比如：<div id="root"></div>
要么把渲染代码里的选择器改成header，也就是：ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('header') );

2. 确认脚本的加载顺序和位置

React和ReactDOM的脚本必须先于你的自定义渲染代码加载，而且建议把所有脚本放在<body>标签的末尾（DOM元素之后），这样能确保执行渲染代码时，目标容器已经被浏览器解析出来了。比如正确的页面结构应该是这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Demo</title>
</head>
<body>
  <!-- 目标容器 -->
  <div id="header"></div>

  <!-- 先引入React依赖 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

  <!-- 再执行渲染代码 -->
  <script>
    ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('header') );
  </script>
</body>
</html>