前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React的Portal是干什么的?

React的Portal是干什么的?

原创
作者头像
Learn-anything.cn
发布于 2021-11-27 22:18:07
发布于 2021-11-27 22:18:07
6730
举报
文章被收录于专栏:learn-anything.cnlearn-anything.cn
一、解决了什么问题?

React节点默认渲染到父节点下,Portal可以让节点渲染到非父节点的其他节点下面。Portal适用场景:当子组件需要从视觉上“跳出”其容器时,譬如对话框、悬浮卡、提示框等。

二、用法说明
1、React正常渲染节点
代码语言:txt
AI代码解释
复制
render() {
    // React 挂载了一个新的 div,并且把子元素渲染其中
    return (
        <div>
            {this.props.children}
        </div>
    );
}
2、Portal渲染节点
代码语言:txt
AI代码解释
复制
render() {
    // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
    // `domNode` 是一个可以在任何位置的有效 DOM 节点。
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    );
}
三、参考链接:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
五个特性,让你升级React
本系列文章主要将总结React从15.x升级到v16.x所需要注意的内容,本文则主要总结为什么要升级到v16.x,v16.x的一些新特性,主要内容包括:
前端林子
2019/06/10
2.3K0
五个特性,让你升级React
为什么 React16 对开发人员来说是一种福音
就像人们对更新移动应用程序和操作系统感到兴奋一样,开发人员也应该对更新框架感到兴奋。不同框架的新版本具有新特性和开箱即用的技巧。
前端小智@大迁世界
2019/06/15
1.5K0
ReactPortals传送门
React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案,即允许将JSX作为children渲染至DOM的不同部分,最常见用例是子组件需要从视觉上脱离父容器,例如对话框、浮动工具栏、提示信息等。
WindRunnerMax
2023/09/30
4370
快速了解React 16新特性
前一段时间React v16.0发布了,作为react骚年,我们当然要关注版本更新之后,react新增了哪些特性呢?
江米小枣
2020/06/16
1.4K0
快速了解React 16新特性
如何优雅地解决多个 React、Vue 应用之间的状态共享
前言 人生是个积累的过程,你总会有摔倒,即使跌倒了,你也要懂得抓一把沙子在手里。—— 丁磊 码过的每一个需求、踩过的每一个坑、修过的每一个 bug 、学过的每一个知识以及看过的每一篇文章都不会成为无
前端劝退师
2020/12/15
2.2K0
如何优雅地解决多个 React、Vue  应用之间的状态共享
React学习笔记(三)—— 组件高级
下面了的代码,我们用到了数组函数的map方法来实现数组的每一个值变成它的2倍,同时返回一个新数组,最后打印出了这个数组:
张果
2023/03/11
8.5K0
React学习笔记(三)—— 组件高级
React16 新特性
于 2017.09.26 Facebook 发布 React v16.0 版本,时至今日已更新到 React v16.6,且引入了大量的令人振奋的新特性,本文章将带领大家根据 React 更新的时间脉络了解 React16 的新特性。
前端迷
2019/08/27
1.2K0
React新特性——Protals与Error Boundaries
在React 16.x 新增了一个名为“Protals”的特性,直接按照字面意思翻译实在不靠谱。在描述这个特性时,我们还是用官方的英文单词来指定它。Portals的作用简单的说就是为了便于开发“弹窗”、“对话框”、“浮动卡片”、“提示窗”等脱离标准文档流的组件而设定的,用于替换之前的unstable_renderSubtreeIntoContainer。
随风溜达的向日葵
2018/08/15
1.1K0
深度解析!Vue3 & React Hooks 新UI组件原理:Modal 弹窗
然后又无意间刷到“Portal”,才知道Modal的实现还有如此妙的方式,顺而想着干脆把UI组件库的实现原理看完。
前端劝退师
2020/03/26
2.9K0
React造轮系列:对话框组件 - Dialog 思路
本轮子是通过 React + TypeScript + Webpack 搭建的,至于环境的搭建这边就不在细说了,自己动手谷歌吧。当然可以参考我的源码。
前端小智@大迁世界
2019/06/15
3.7K0
「React进阶」 React全部api解读+基础实践大全(夯实基础万字总结)
很多同学用react开发的时候,真正用到的React的api少之又少,基本停留在Component,React.memo等层面,实际react源码中,暴露出来的方法并不少,只是我们平时很少用。但是React暴露出这么多api并非没有用,想要玩转react,就要明白这些API究竟是干什么的,应用场景是什么,今天就让我们从react 到 react-dom,一次性把react生产环境的暴露api复习个遍(涵盖90%+)。
用户6835371
2021/06/01
2.3K0
「React进阶」 React全部api解读+基础实践大全(夯实基础万字总结)
《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件
本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余.
徐小夕
2020/02/19
1.8K0
详解「react-dom」 API
从Vue转到React差不多快三个月,这两种框架其实在设计哲学上完全是不一样的道路但是同时又那么相似。
19组清风
2021/11/15
9380
详解「react-dom」 API
每日两题 T23
设计一个简化版的推特(Twitter),可以让用户实现发送推文,关注/取消关注其他用户,能够看见关注人(包括自己)的最近十条推文。你的设计需要支持以下的几个功能:
合一大师
2020/07/20
4700
React-其它内容-Portals 和 React-父子组件通讯-类组件
Portals 是根据 ReactDOM 的 createPortal 所得到的,createPortal 接收两个参数:
杨不易呀
2023/09/30
2420
在 React 中实现 keep alive(可参与文末讨论哦)
在 Vue 中,我们可以使用 keep-alive 包裹一个动态组件,从而「缓存」不活跃的实例,而不是直接销毁他们:
前端森林
2020/10/22
1.9K0
听说现在都考这些React面试题
新人入职新上手项目,如何把它跑起来,这是所有人都会碰到的问题:所有人都是从新手开始的。
山月
2021/05/11
1.1K0
React源码解析之FunctionComponent(上)
在 React源码解析之workLoop 中讲到当workInProgress.tag为FunctionComponent时,会进行FunctionComponent的更新:
进击的小进进
2019/12/02
1.1K0
美团前端常见react面试题(附答案)_2023-03-01
BrowerRouter,利用HTML5中 history API实现,需要服务器端支持,兼容性不是很好。
用户10358021
2023/03/01
9700
入门 TypeScript 编写 React
Create React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时,你可以运行:
icepy
2019/06/24
5.4K0
相关推荐
五个特性,让你升级React
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档