升级至React 18后Bootstrap引发ReactDOM.unstable_renderSubtreeIntoContainer()错误的解决办法

遇到这个问题很常见，因为React 18彻底移除了ReactDOM.unstable_renderSubtreeIntoContainer()这个不稳定API，而旧版的Bootstrap React组件（比如react-bootstrap）可能在内部依赖了它。下面是几个可行的解决办法：

• 升级Bootstrap React组件库到兼容版本
  这是最稳妥的长期方案。如果你使用的是react-bootstrap，需要升级到v2.5.0及以上版本（该版本开始官方全面适配React 18）。执行以下命令更新：

  # npm用户
  npm update react-bootstrap bootstrap
  # yarn用户
  yarn upgrade react-bootstrap bootstrap
  

  如果你用的是其他Bootstrap衍生组件库（比如reactstrap），请确认其最新版本的兼容性说明，然后同步升级到支持React 18的版本。

• 检查自定义封装的Bootstrap组件
  如果项目中有自己封装的基于旧版Bootstrap组件的代码，排查是否有间接调用该废弃API的逻辑。如果有，替换为React 18的标准API，比如使用createRoot替代旧的渲染方式：

  // React 18之前的写法
  ReactDOM.render(<App />, document.getElementById('root'));
  
  // React 18推荐的写法
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
  

• 临时兼容方案（仅作过渡使用）
  如果暂时无法升级组件库，可以添加一个临时的polyfill来模拟这个废弃API，但不推荐长期依赖：

  import ReactDOM from 'react-dom';
  
  // 模拟废弃API的行为
  if (!ReactDOM.unstable_renderSubtreeIntoContainer) {
    ReactDOM.unstable_renderSubtreeIntoContainer = (parentComponent, element, container, callback) => {
      const root = ReactDOM.createRoot(container);
      root.render(element);
      if (callback) callback();
      return root;
    };
  }
  

  把这段代码放在项目的入口文件（比如index.js）最顶部，确保在Bootstrap组件加载前执行。

• 清理缓存并重新构建
  升级组件库后，记得清理包管理工具的缓存，避免旧版本代码残留：

  # npm清理缓存
  npm cache clean --force
  # yarn清理缓存
  yarn cache clean
  

  之后重新安装依赖并构建项目，确保新组件版本被正确加载。

总结一下，优先选择升级组件库的方案，临时polyfill只是过渡手段，长期使用可能会带来其他兼容性隐患。

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