Django模板加载正常无报错 无法渲染React组件该如何排查

问题修复方案 #

1. 修复React类组件语法错误

你定义组件时多写了不必要的括号，ES6类继承父类不需要加括号，修正App组件的类定义：

// 错误写法
export default class App extends Component(){
// 修正后写法
export default class App extends Component {

2. 补全入口文件执行逻辑

你的入口文件index.js仅导入了App组件，没有触发渲染执行逻辑，建议统一把挂载逻辑放到入口文件，避免模块加载顺序问题：

• 先删除App组件文件末尾的ReactDOM.render相关代码
• 修改index.js内容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./components/App";

// React 17及更早版本使用这个写法
ReactDOM.render(<App />, document.getElementById('app'));

// 如果你用的是React 18+版本，替换为如下写法
// import { createRoot } from 'react-dom/client';
// const root = createRoot(document.getElementById('app'));
// root.render(<App />);

3. 补全Babel React转译配置

你当前只配置了babel-loader，但没有配置JSX语法转译规则，导致React语法无法被正常识别：

• 首先安装依赖：

npm install @babel/preset-react --save-dev

• 在项目根目录创建.babelrc配置文件，添加如下内容：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

4. 可选：确保DOM节点加载完成后再渲染

可以给渲染逻辑加DOM加载监听，避免节点未加载导致的挂载失败：

document.addEventListener('DOMContentLoaded', () => {
  // 把上面的ReactDOM.render或者createRoot逻辑放到这里
})

全部修改完成后重新执行webpack打包命令，刷新页面即可正常渲染组件。

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