How to correct React Portal error: Target container is not a DOM element

Question

我在获取 React 门户网站时遇到问题。我不明白为什么我收到错误消息 portal id is not DOM element 这显然是一个有效的 DOM 元素。

我有一个沙盒here

此处提供了完整的代码。 console.log 正确报告元素是 DOM 元素，但 React 抛出错误。

import "./styles.css";
import { createPortal } from "react-dom";
import { useEffect, useState } from "react";

export default function App() {
  const [portalDiv, setPortalDiv] = useState(undefined);

  useEffect(() => {
    let pd = document.getElementById("portalDiv");
    console.log(pd);
    setPortalDiv(pd);
  }, []);

  return (
    <>
      <div id="portalDiv">portal container</div>
      <div className="app">
        {/* {console.log("render portaldiv", portalDiv)} */}
        {
          (portalDiv &&
            createPortal(
              <>
                <h1>Inside portal</h1>
              </>
            ),
          portalDiv)
        }
        <h1>Outside portal</h1>
      </div>
    </>
  );
}

任何建议表示赞赏。谢谢

Answer 1

如我的评论所述，不推荐使用此用例，但这是一个可重现的示例。

如果您打算将 React 节点注入 VDOM，您应该为此使用 React API，这样您在查询 DOM 时就不会出现竞争条件通过 DOM API.

import "./styles.css";
import { createPortal } from "react-dom";
import { useRef } from "react";

export default function App() {
  const containerRef = useRef();

  return (
    <>
      <div ref={containerRef}>portal container</div>
      <div id="app">
        {containerRef.current &&
          createPortal(<h1>Example Element</h1>, containerRef.current)}
        <h1>Outside portal</h1>
      </div>
    </>
  );
}

How to correct React Portal error: Target container is not a DOM element

How to correct React Portal error: Target container is not a DOM element

reactjs

react-portal