React - createPortal

前端小趴菜052025-07-14 22:49

什么是createPortal？

注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。

用法

javascript 复制代码

import { createPortal } from 'react-dom';

const App = () => {
  return createPortal(<div>前端s</div>, document.body);
};

export default App;

参数

children：要渲染的组件
domNode：要渲染到的DOM位置
key?：可选，用于唯一标识要渲染的组件

返回值

返回一个React元素(即jsx)，这个元素可以被React渲染到DOM的任意位置

应用场景

弹窗
下拉框
全局提示
全局遮罩
全局Loading

例如 Antd 的 Modal 组件，就是挂载到 body 上的。

案例

全局loading

src/components/Loadingl/index.tsx

javascript 复制代码

import './index.css'

const Loading: React.FC = () => {
   
   return <div className="loading">
     lodaing...
   </div>;
};

export default Loading;

使用createPortal 挂载到body

javascript 复制代码

import { createPortal } from 'react-dom'

const Loading = () => {
  return createPortal(
    <div className='loading'>
      loading...
    </div>,
    document.body
  );
}

export default Loading;

createPortal更灵活，可以挂载到任意位置