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

发布于 2025-01-20 07:30:09 字数 651 浏览 3 评论 0原文

我正在使用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 !"
    })
  }
}

但反应警告这种行为：

代码> Croteroot 渲染功能？

原文

I'm using React 18 and nextjs and I made a kind of render function like this

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} />)
  }
}

And I want to use this function like this

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

But React warn of this behavior:

Anyone knows why React warn using of createRoot for the render function ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有一腔孤勇 2025-01-27 07:30:09

在运行时，应仅称呼一次

回复收藏 0 原文

ら栖息 2025-01-27 07:30:09

在运行时，您只能在特定容器上调用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} />);
  }
};

You should only call createRoot on a specific container once during runtime. Update the logic to create and cache an alert root.

Example:

let root: Root | null = null;

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

回复收藏 0 原文

~没有更多了~