React组件无法渲染排查：页面仅显示123且无报错

算力阿峰

2026-5-29

问题：React组件未渲染，页面仅显示"123"

我有一个React组件代码（路径/assets/js/app.js）：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (
      <div className="greeting">
        <h1> Hello World! </h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

对应的HTML模板（路径/templates/layout/app.html.eex）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Hello Sandbox!</title>
  <%= if Mix.env == :dev do %>
    <link rel="stylesheet" href="http://domain:8080/styles.css">
  <% else %>
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
  <% end %>
</head>
<body>
  <div id="root">123</div>
  <%= if Mix.env == :dev do %>
    <script src="http://domain.ru:8080/app.js"></script>
  <% else %>
    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
  <% end %>
</body>
</html>

Webpack配置正常编译输出，脚本也成功加载了，但页面只显示123，控制台没有任何错误或警告，这是哪里出问题了？

首先，锁定核心矛盾

页面还显示123，说明root元素的初始内容完全没被React替换，只有两种核心可能：

ReactDOM.render根本没执行
ReactDOM.render执行了，但找不到目标DOM元素

具体排查步骤

1. 先确认脚本是否真的在运行

在app.js最顶部加一行测试代码：

console.log('App.js 已加载并执行！');

刷新页面后看浏览器控制台有没有这个输出：

如果没有输出：说明脚本要么地址错了（比如domain.ru和domain域名不一致，本地hosts没映射）、要么跨域被拦截、要么Webpack打包出的代码无法自动执行（比如libraryTarget配置错误）。
如果有输出：继续往下排查。

2. 检查React/ReactDOM是否存在

在控制台手动输入React和ReactDOM，看这两个对象是否存在：

如果不存在：说明Webpack没把它们打包进去，或者你在配置里设了externals但页面没引入CDN版本的React库。这时候要么调整Webpack配置去掉不必要的externals，要么在HTML里手动引入React/ReactDOM的CDN脚本。

3. 确认目标DOM元素是否存在

在ReactDOM.render前加一行代码：

console.log('Root元素：', document.getElementById('root'));

如果输出是null，说明脚本执行时DOM还没准备好——虽然你的脚本放在</body>前理论上DOM已加载，但可以试试把渲染逻辑包裹在DOM加载完成事件里：

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<App />, document.getElementById('root'));
});

4. 检查Webpack配置细节

确保target: 'web'（默认就是浏览器环境，不用额外设置，但如果改了要改回来）
检查Babel配置是否正确转译JSX：确认安装了@babel/preset-react，并在babel配置文件里启用了它
如果用了热重载，试试重启Webpack dev server和Phoenix服务器，有时候热重载会出玄学问题

5. 统一域名避免潜在问题

你的dev环境里CSS用的是domain:8080，脚本用的是domain.ru:8080，域名不一致可能导致潜在的跨域或解析问题，建议统一改成localhost:8080或者同一个自定义域名，避免不必要的麻烦。

最可能的原因总结

结合你的情况，最大概率是脚本没正确执行（比如域名映射错误导致加载的脚本不对），或者React/ReactDOM没被正确打包进脚本。按照上面的步骤排查，应该很快能定位到问题！

内容的提问来源于stack exchange，提问作者Максим Барулин