React - createPortal

什么是createPortal？

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

用法 

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

import './index.css'const Loading: React.FC = () => {return <div className="loading">lodaing...</div>;
};export default Loading;

使用createPortal 挂载到body

import { createPortal } from 'react-dom'const Loading = () => {return createPortal(<div className='loading'>loading...</div>,document.body);
}export default Loading;

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