React 18升级后，如何实现<container><component/></container>应用初始化？

你的核心问题是未保留原代码中将Component作为参数传入渲染函数的逻辑，同时未正确适配React 18的createRoot API。以下是完整的迁移代码：

import React from "react"
import { createRoot } from 'react-dom/client';
import NextApp from "./NextApp"
import { AppContainer } from "react-hot-loader"

// React 18要求仅创建一次root实例
const domNode = document.getElementById('root');
const root = createRoot(domNode);

// 保留原有的渲染函数逻辑，接收Component作为参数
const render = (Component) => {
  root.render(
    <AppContainer>
      <Component />
    </AppContainer>
  )
}

// 首次渲染入口
render(NextApp)

// 热更新逻辑保持原有逻辑即可
if (module.hot) {
  module.hot.accept("./NextApp", () => {
    render(NextApp)
  })
}

关键说明： #

• React 18与React 16的核心差异之一是createRoot只需初始化一次，无需每次渲染都重新创建实例，后续更新直接调用root.render即可。
• 原代码的动态传入Component的封装逻辑完全可以复用，仅需替换内部的渲染API。
• 注意react-hot-loader对React 18兼容性有限，若后续热更新出现异常，建议替换为React官方的Fast Refresh（Next.js默认已集成该功能，无需额外配置）。

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