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

相关推荐
叫我阿柒啊9 分钟前
Java全栈工程师的实战面试:从基础到微服务的全面解析
java·数据库·vue.js·spring boot·微服务·前端开发·全栈开发
暖木生晖10 分钟前
引入资源即针对于不同的屏幕尺寸,调用不同的css文件
前端·css·媒体查询
袁煦丞43 分钟前
DS file文件管家远程自由:cpolar内网穿透实验室第492个成功挑战
前端·程序员·远程工作
用户0137412843744 分钟前
九个鲜为人知却极具威力的 CSS 功能:提升前端开发体验的隐藏技巧
前端
永远不打烊1 小时前
Window环境 WebRTC demo 运行
前端
风舞1 小时前
一文搞定JS所有类型判断最佳实践
前端·javascript
coding随想1 小时前
哈希值变化的魔法:深入解析HTML5 hashchange事件的奥秘与实战
前端
一树山茶1 小时前
uniapp在微信小程序中实现 SSE进行通信
前端·javascript
coding随想1 小时前
小程序中的pageshow与pagehide事件,HTML5中也有?揭秘浏览器往返缓存(BFCache)
前端
萌萌哒草头将军1 小时前
Rspack 1.5 版本更新速览!🚀🚀🚀
前端·javascript·vue.js