知道react里面的createPortal么，说说其使用场景？

最新推荐文章于 2024-11-05 21:51:19 发布
最新推荐文章于 2024-11-05 21:51:19 发布
阅读量144 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tang18533952786/article/details/129802463
版权

createPortal 将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。
应用场景：
当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上跳出其容器。例如，对话框、悬浮卡以及提示框。

爱上猫的程序猿
关注
组合 vs 继承 及 使用ReactDOM.createPortal实现弹框
subsistent的博客
08-17 298
在 React 中，Portal 直接改变了组件的挂载方式，不再是挂载到上层父节点上，而是可以让用户指定一个挂载节点。把重复的代码提取出来合并成为一个个组件，组件最重要的就是复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。它不是从基类继承属性，而是描述一个类，该类可以引用另一个类的一个或多个对象作为实例。我们有header组件、footer组件。React 中的一切都是一个组件，它遵循一个强大的基于组件的模型。
React createPortal 弹窗 modal
DongFuPanda的博客
12-15 985
我对弹窗的设想是： 可定制宽高，append 到 body，fixed 定位 容易定制样式，来适应不断变化的多种多样的需求 在 React 中，要实现第一点，可用到 Portal 技术。 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。 ReactDOM.createPortal(child, container) 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元
React-个人总结八股文的背诵方案
weixin_43073401的博客
07-08 2414
函数式编程鼓励将计算视为数学函数的组合，通过函数的组合、高阶函数和递归等方式来表达计算逻辑。声明式编程通常使用领域特定语言（DSL）或声明式语法来表达计算逻辑，使代码更加简洁、易读和易理解。声明式编程更关注问题的本质和逻辑，而不是具体的实现细节。状态（state）是组件内部用于存储和管理数据的对象，类组件通过this.setState管理，函数组件使用useState或useReducer管理。React将状态看做一个自动机，通过状态的更新，可以重新渲染组件，并反映出新的数据状态。
详解「react-dom」 API
油墨香^-^的博客
03-08 408
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。我们可以通过在React中跳过层级关系将我们的vNode任何React元素渲染到指定的真实Dom元素上去。熟悉Vue3的同学可能第一时间就想到Teleport,没错。你完全可以使用Teleport的思想来理解。关于你可以点击它来查看更加详尽的解释。这里其实我想给大家重点讲述的是。
React 18：Portal createPortal()方法
七七的博客
01-07 2156
遮罩层的作用，是用来盖住其他元素的，它本就不该作为Box的子元素出现，作为子元素了，就难免会出现类似问题。比如，需要在React中添加一个会盖住其他元素的Backdrop组件，Backdrop显示后，页面中所有的元素都会被遮盖。如果此时，当前元素后边的兄弟元素中有开启定位的情况出现，且层级不低于当前元素时，便会出现盖住遮罩层的情况。现在三个组件的关系是，绿色Box是橙色Box的兄弟元素，Backdrop是绿色Box的子元素。React元素中的子组件，在DOM中，也会是其父组件对应DOM的后代元素。
React 弹窗组件用的 createPortal 是怎么实现的？
2301_79773949的博客
10-27 254
弹窗组件会把 dom 渲染到 body 下，这需要用到 createPortal 的 api。我们一起调试源码来探究了它的实现原理。react 的 jsx 语法编译之后会变成 render function 的代码，执行后产生 React Element（也就是 vdom）。createPortal 的返回值就是一种 React Element 节点，其中 containerInfo 存放着容器节点。
[react] React的严格模式有什么用处？
歌谣的博客
11-13 1507
[react] React的严格模式有什么用处？ react的strictMode 是一个突出显示应用程序中潜在问题的工具，与Fragment一样，strictMode 不会渲染任何的可见UI，它为其后代元素触发额外的检查和警告。 注意：严格模式仅在开发模式下运行，它们不会影响生产构建 可以为程序的任何部分使用严格模式 import React from 'react'; function ExampleApplication() { return ( <div>
react和vue的区别 应用场景
weixin_58160355的博客
05-02 1074
目录： 1. 监听数据变化的实现原理不同 2. 数据流的不同 3. HoC和mixins 4. 组件通信的区别 5. 模板渲染方式的不同 6. 渲染过程不同 7. 框架本质不同 8. 开发过程中 9. 开发应用时 应用场景： react 和 vue 是我们做前端中必不可少的，一般看公司都在使用什么，你就要用什么，一般规模大的公司都会使用react+ts/react+hook，小公司使用vue2.0多一点，但不是全方面的，那么我们来说说react和vue有什么区别： 1. 监听数据变化
react-new-window:using使用`window.open`在React中弹出新窗口
05-07
为React 16构建（使用ReactDOM.createPortal ）。 阻止弹出窗口的处理程序（通过onBlock prop）。 根据父窗口或屏幕使弹出窗口居中。 安装 npm i react-new-window --save 用法 import React from 'react' import...
react 魔法之createPortal（复用子组件已写好的代码到父组件）
总结，交流，记录，成长
02-29 358
你是不是遇到过这样的问题，花费了很多精力在一个子组件中写好了一段代码，比如一个逻辑复杂的按钮，离发布已经不久了，产品这时告诉你这个按钮需要移动下位置，比如移动到父组件的页面顶部。从产品的角度，不就移个位置，有什么难的。但其实移动到上级甚至上上级的组件中，当前在子组件维护的所有状态，调用的方法是不是都要迁移过去，顿觉好坑。方案一：通过css定位实现，缺陷，如果有其它元素占用页面空间，就要重新改变定位值。方案二：就是我要说明的createPortal用法，大胆尝试一下，你会发现新大陆。
React官方文档： React.createPortal的使用示例
amadeus_liu2的博客
12-24 580
react
利用ReactDOM.createPortal 实现一个tooltip组件
weixin_42362211的博客
11-11 1385
/** 一、创建btn和tooltip组件 二、获取当前btn的几何属性和全局定位属性 三、tooltip需要得到btn的几何属性和全局定位属性 四、tooltip根据btn的位子几何信息进行定位（当滚轮滑动时重新定位tooltip） 五、创建点击事件、点击btn反转display状态、点击不再tooltip中 隐藏tooltip 用到的api useRef useEffect usestate createPortal useRef：作用在实际的元素上可以获取当前元素的实例，作用在组建上时需要配合api
react18 函数组件 学习笔记
Scar_goSky的博客
05-11 2412
rect笔记
react实现弹窗、弹窗的静态方法的方式
yun_master的博客
03-10 7355
ReactDOM.createPortal(ReactNod,container) 实现弹窗的关键在于,如何将弹窗组件挂载到任意的dom上.这里react-dom中提供了一个方法,下面举个例子 import React from 'react'; import ReactDOM from 'react-dom'; const Modal = (props) => { const { container } = props; return ReactDOM.createPortal( /
5、reactive
weixin_37306719的博客
10-31 408
reactiveObject.assign`去整体替换）。
Jest进阶知识：深入测试 React Hooks-确保自定义逻辑的可靠性
最新发布
weixin_53961451的博客
11-05 260
通过本文的介绍，我们了解了如何使用 `@testing-library/react-hooks` 测试 React Hooks，特别是自定义 Hooks。通过对 Hooks 的行为进行测试，可以确保它们在不同情况下的表现符合预期，从而提高代码的可靠性和可维护性。
react中ref使用支持父调用子组件的方法
lwl12345678_的博客
11-05 173
【代码】react中ref使用支持父调用子组件的方法。
react-路由
a2739294436的博客
10-31 394
4.创建页面组件 pages/home/index.js。2.配置文件 router/index.js。3.创建文件 pages/mian.js。5.在入口文件App.js导入router。
Vue中ref、reactive、toRef、toRefs的区别
weixin_40992252的博客
11-01 476
更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想。toRef当数据发生改变时，界面不会自动更新。二、toRef、toRefs。
react.createPortal
07-25
ReactDOM.createPortal是React的一个API，用于将子组件渲染到父组件之外的DOM节点上。这个API可以让我们在React应用中创建一个独立的DOM节点，并将其插入到DOM树的任意位置，从而实现更加灵活的组件渲染方式。使用createPortal可以让我们在React应用中实现一些特殊的UI效果，比如弹出框、模态框等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值