React Portal显示空白页：我的代码存在什么问题？

你的代码文件 #

index.html #

<div id="root"></div>
<div id="portaltest"></div>

App.js #

import React, { Component } from "react";
import PortalTest from "./PortalTest";

export class App extends Component {
  render() {
    return (
      <div>
        <PortalTest />
      </div>
    );
  }
}

export default App;

PortalTest.js #

import React from "react";
import { ReactDOM } from "react";

function PortalTest() {
  return ReactDOM.createPortal(
    <div>This is the PORTAL DIV</div>,
    document.getElementById("portaltest")
  );
}

export default PortalTest;

错误点及修复方法 #

1. ReactDOM导入路径错误
   PortalTest.js里的ReactDOM导入来源错误，ReactDOM是独立的npm包，不属于react包范畴。修改PortalTest.js的导入语句：

// 方式一：导入完整ReactDOM
import React from "react";
import ReactDOM from "react-dom";

// 方式二：直接导入createPortal方法
import React from "react";
import { createPortal } from "react-dom";

// 若用方式二，组件内代码需对应修改
function PortalTest() {
  return createPortal(
    <div>This is the PORTAL DIV</div>,
    document.getElementById("portaltest")
  );
}

2. 可能缺少根组件渲染代码
   如果项目入口文件（通常是index.js）没有将App组件渲染到root节点，整个React应用不会启动。需补充入口文件代码：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

完成以上修改后，页面即可正常显示Portal内容。

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