React 18中ReactDOM.render替代方案：非根组件渲染报错求助

方案1：为组件创建独立的根容器 #

给NotificationsManager分配单独的DOM容器，针对这个容器创建专属的React根实例，避免和应用主根冲突：

1. 在页面中添加独立容器：

<div id="notifications-container"></div>

2. 渲染组件：

const notificationsContainer = document.getElementById('notifications-container');
const notificationsRoot = ReactDOM.createRoot(notificationsContainer);

notificationsRoot.render(
  <NotificationsManager
    setNotify={(notifyFn) => {
      notify = notifyFn;
    }}
  />
);

组件拥有独立的根实例，和主应用根互不干扰，不会触发重复创建根的警告。

方案2：使用React Portal渲染 #

把NotificationsManager整合到主应用组件树中，通过Portal将其渲染到目标容器，无需单独调用根渲染方法：

import { createPortal } from 'react-dom';

// 在主应用的任意组件中使用
function SomeParentComponent() {
  return (
    <>
      {/* 其他业务组件 */}
      {createPortal(
        <NotificationsManager
          setNotify={(notifyFn) => {
            notify = notifyFn;
          }}
        />,
        containerElement // 你原本的目标容器
      )}
    </>
  );
}

这种方式符合React 18的架构设计，组件属于主应用树的一部分，同时可以渲染到页面任意指定容器。

方案3：封装带缓存的渲染工具函数 #

如果必须单独调用渲染逻辑，可封装工具函数缓存每个容器对应的根实例，避免重复创建：

// 缓存容器对应的根实例
const rootCache = new Map();

function renderToContainer(Component, container) {
  let root = rootCache.get(container);
  // 容器未创建过根实例则新建
  if (!root) {
    root = ReactDOM.createRoot(container);
    rootCache.set(container, root);
  }
  // 渲染或更新组件
  root.render(Component);
}

// 使用示例
renderToContainer(
  <NotificationsManager
    setNotify={(notifyFn) => {
      notify = notifyFn;
    }}
  />,
  containerElement
);

通过Map缓存根实例，确保同一个容器只会创建一次根，解决重复创建的警告问题，同时无需依赖主应用根实例。

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