React - createPortal

什么是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更灵活,可以挂载到任意位置

相关推荐
百万蹄蹄向前冲1 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗12 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透2 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子2 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF2 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane2 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
gnip3 小时前
可重试接口请求
前端·javascript
若梦plus3 小时前
模块化与package.json
前端
烛阴3 小时前
Aspect Ratio -- 宽高比
前端·webgl
若梦plus3 小时前
Node.js中util.promisify原理分析
前端·node.js