React Portals的使用

某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元素上的）。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
第二个参数（container）是一个 DOM 元素；

通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：

Modal组件案例

比如说，我们准备开发一个Modal组件，它可以将它的子组件渲染到屏幕的中间位置：

步骤一：修改index.html添加新的节点
步骤二：编写这个节点的样式
步骤三：编写组件代码

import React, {PureComponent} from 'react';
import ReactDom from 'react-dom'
class Modal extends PureComponent {render() {return ReactDom.createPortal(this.props.children,document.getElementById('modal'))}
}
class Home extends PureComponent {render() {return (<div><h2>Home</h2><Modal><h2>Title</h2></Modal></div>);}
}
class App extends PureComponent {render() {return (<div><Home /></div>);}
}
export default App;

React Portals的使用相关推荐

React Portals与Error Boundaries
Portals 在React 16.x 新增了一个名为"Protals"的特性,直接按照字面意思翻译实在不靠谱.在描述这个特性时,我们还是用官方的英文单词来指定它.Portals的 ...
React源码解毒 - render方法解析
render方法解析要将react元素渲染到页面当中,分为了两个阶段: render阶段和 commit阶段. render阶段:由协调层负责的阶段在这个阶段当中要为每一个react元素构建对应 ...
乾坤微前端_微前端架构初探以及我的前端技术盘点
前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
大厂前端面试都问些什么问题？入职爱奇艺年薪48万，面试经验总结
前言 "金九银十"跳槽季,又到了面试求职的高峰期.好多小伙伴都会跳槽去找工作.如果你不跳槽,也建议把这篇文章看完,毕竟金九银十之后,就是金三银四了,总是逃不掉的? 你在面试的时候, ...
2021 年最新的个人录制的前后端真正的免费编程学习视频
2021 年最新的个人录制的前后端真正的免费编程学习视频我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. 诱人的 React 免费视频教程 - 基础篇(14 个视频 - 已完结) 诱人的 ...
[react] 你有用过React的插槽(Portals)吗？怎么用？
[react] 你有用过React的插槽(Portals)吗?怎么用? 1.首先简单的介绍下react中的插槽(Portals),通过ReactDOM.createPortal(child, cont ...
React 打怪笔记
介绍本文为学习react中的记录. Tips: 当组件的props或state有变化,执行render函数. 无论是使用函数或是类来声明一个组件,它决不能修改它自己的props React 可以将多 ...
模糊选择器 js_5个很棒的 React.js 库，值得你亲手试试！
React在过去几年变得越来越受欢迎.随之而来的是越来越多的库的发布,给我们带来了新的可能性,但最重要的是让开发这工作变得越来越简单. 在本文中,介绍 5 个 React 库,希望能给你带来一些帮助. ...
从0到1，一步步开发React的loading组件，并发布到npm上
没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西.甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应该挺难的,就小声说了没有,然后就让我回去 ...

React Portals的使用

Modal组件案例

React Portals的使用相关推荐

最新文章

热门文章