ReactDom.createPortal不生效、render仅触发一次问题排查求助

问题根因排查 #

首先请确认你的页面中已存在id为notificationContainer的DOM节点（可以写在public/index.html中，或者在App组件的render返回里提前渲染），否则两种实现都会找不到容器。

1. ReactDOM.render仅首次生效的原因 #

ReactDOM.render的设计逻辑是：对同一个DOM容器多次调用时，会执行更新逻辑而非新增节点。你首次调用后，notificationContainer已经绑定为React渲染的根容器，后续调用render会直接diff该容器下的已有组件，复用已有节点而非插入新的Toast，自然不会新增。

2. createPortal无内容渲染的原因 #

createPortal是React组件渲染体系的能力，返回的Portal是一个特殊的React元素，必须作为某个正常React组件的render返回值的一部分，被纳入React的渲染树才会生效。你现在在普通工具函数中直接返回Portal，没有被任何组件的渲染逻辑消费，自然不会渲染到页面上。

解决方案 #

方案1：修改ReactDOM.render实现，保持函数调用习惯 #

每次调用时先在通知容器下新建一个独立的子DOM节点，再往这个子节点渲染Toast，就不会互相覆盖了：

// helpers.js 改动后
import { ToastNotification } from "carbon-components-react";
import { createRoot } from 'react-dom/client'; // React18推荐用createRoot替代旧render，React17及以前可直接用render

export const createNotification = (duration = 3000) => {
  const container = document.getElementById("notificationContainer");
  // 新建独立子容器，避免覆盖之前的渲染节点
  const toastWrapper = document.createElement('div');
  container.appendChild(toastWrapper);
  // 渲染通知
  const root = createRoot(toastWrapper);
  root.render(<ToastNotification />);
  // 可选：添加自动销毁逻辑
  setTimeout(() => {
    root.unmount();
    toastWrapper.remove();
  }, duration)
};

调用逻辑不需要改动，和你之前的写法完全一致。

方案2：createPortal的正确实现方式 #

如果要用Portal，需要把通知的状态放到全局/父组件管理，不能直接用函数调用生成：

1. 改造App.js添加全局通知管理

// App.js
import { useState } from 'react';
import { ToastNotification } from "carbon-components-react";
import { createPortal } from "react-dom";

function App() {
  // 全局通知列表状态
  const [notifications, setNotifications] = useState([]);
  // 把添加通知的方法挂到全局，也可以用Context共享给所有子组件
  window.addNotification = () => {
    setNotifications(prev => [...prev, Date.now()]); // 用时间戳当唯一ID
  }
  return (
    <div>
      <div className="App"></div>
      <div id="notificationContainer"></div>
      {/* 渲染所有Portal通知 */}
      {notifications.map(id => 
        createPortal(<ToastNotification key={id} />, document.getElementById("notificationContainer"))
      )}
    </div>
  );
}
export default App;

2. 调整调用逻辑

// login.js里的调用逻辑
const validateLogin = async (event) => {
  window.addNotification();
  // 其余原有逻辑
};

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