react runtime_error ai_generated true

错误：目标容器不是DOM元素。使用createPortal时，第二个参数必须是有效的DOM节点。

Error: Target container is not a DOM element. When using createPortal, the second argument must be a valid DOM node.

ID: react/portal-target-not-dom-element

其他格式: JSON · Markdown 中文 · English
88%修复率
86%置信度
1证据数
2023-08-12首次发现

版本兼容性

版本状态引入弃用备注
React 16.0.0 active — — —
React 17.0.2 active — — —
React 18.2.0 active — — —

根因分析

传递给ReactDOM.createPortal的第二个参数不是有效的DOM元素（例如null、undefined或字符串选择器），通常是因为目标元素尚未渲染或选择器不正确。

English

The second argument passed to ReactDOM.createPortal is not a valid DOM element (e.g., null, undefined, or a string selector), often because the target element hasn't been rendered yet or the selector is incorrect.

generic

官方文档

https://react.dev/reference/react-dom/createPortal

解决方案

  1. Ensure the target DOM element exists before calling createPortal by using a ref or checking if the element is available in useEffect.
  2. Define the target element in the HTML file (e.g., index.html) and ensure it's present before the React app mounts.

无效尝试

常见但无效的做法:

  1. Using document.querySelector('#root') without checking if the element exists 70% 失败

    If the DOM element is not yet mounted (e.g., in a component that renders before the target), querySelector returns null.

  2. Passing a string like '#modal-root' directly to createPortal 90% 失败

    createPortal expects a DOM element, not a CSS selector string. It will throw an error because a string is not a node.

  3. Using document.getElementById inside a component that runs before the target is rendered 60% 失败

    If the target div is defined in the same component's JSX, it may not exist in the DOM when the portal is created, leading to null.