React-Django项目中ReactDOM的render方法调用失效该如何解决？

问题根源 #

你当前项目安装的是React 18及更高版本，该版本已经废弃并移除了旧版本react-dom直接导出的render API，和你使用类组件、Django集成逻辑无关，就是版本迭代导致的API不兼容问题。你可以先查看项目根目录package.json文件中react、react-dom的版本号，确认是18.x版本即可验证该问题。

解决方案 #

有两种可选方案，按需选择即可：

方案1：适配React 18新API（推荐） #

修改入口文件的react-dom导入和渲染逻辑，调整后的完整代码如下：

import React, { Component } from "react";
import { createRoot } from "react-dom/client";
import HomePage from "./HomePage";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="center">
        <HomePage />
      </div>
    );
  }
}

const appDiv = document.getElementById("app");
const root = createRoot(appDiv);
root.render(<App />);

方案2：降级React版本沿用旧写法 #

如果不想修改代码，可将React相关依赖降级到17.x版本，在package.json中修改对应依赖版本：

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

修改后重新执行依赖安装命令即可生效。

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