为什么在容器内使用 createRoot 时 React 18 会发出警告？

Question

我正在使用 React 18 和 nextjs，我制作了一种像这样的渲染函数

export const showAlert = (props: AlertProps) => {
  // it will catch <div id="alert"></div> inside _document.tsx
  const container = document.getElementById('alert')
  if (container) {
    const root = createRoot(container)
    root.render(<Alert {...props} />)
  }
}

我想像这样使用这个功能

const handleClick = () => {
  if (error) {
    showAlert({
      type: "error",
      text: "Error !"
    })
  }
}

但是 React 警告这种行为：

有人知道为什么 React 警告在渲染函数中使用

createRoot

吗？

Answer 1

在运行时，createRoot 应该只被调用一次

Answer 2

在运行时，您应该只在特定容器上调用

createRoot

一次。更新逻辑以创建和缓存警报

root

。

示例：

let root: Root | null = null;

const showAlert = (props: AlertProps) => {
  const container = document.getElementById("alert");
  if (container) {
    root = root ?? createRoot(container);
    root.render(<Alert {...props} />);
  }
};