React之Protals详解

首先何为Protals？

Protal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案
1.第一个参数(child)是任何可渲染的React子元素,例如一个元素,字符串fragment
2.第二个参数(container)是一个DOM元素

因为我们渲染的内容默认都是挂载到id为root的DOM元素上的，但是当我们渲染的这个元素要脱离root怎么办？

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

首先在index.html上重新定义一个div

<div id="modal"></div>

给它写个样式

#modal{position: absolute;width: 200px;height: 200px;background-color: red;left: 50%;top: 50%;transform: translate(-50%,-50%);
}

通过一个ReactDOM.createPortal来实现

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>)}
}export default class App extends PureComponent {render() {return (<div><Home/></div>)}
}

结果如图，它就不在根节点root上了

React之Protals详解相关推荐

React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
React 路由react-router-dom详解
React 路由react-router-dom详解 ( 路由嵌套 + 路由传参 + 路由权限 + 路由优化按需导入 + 404页面 ) 前面我们先了解一下路由是什么? 路由分类有哪些?内置API ...
视频教程-React Hooks 案例详解（React 进阶必备）-其他
React Hooks 案例详解(React 进阶必备) Leo 1978年8月生,河北石家庄人. 曾任职中软股份. 计算科学导师: 刘坤起博士. 开发的<电商分销系统>获得淘宝Top10 ...
React Native按钮详解|Touchable系列组件使用详解
转载自:http://www.devio.org/2017/01/10/React-Native按钮详解-Touchable系列组件使用详解/ 在做App开发过程中离不了的需要用户交互,说到交互,我们 ...
React Diff算法详解
react diff算法 diff算法, 是 Virtual DOM 产生的一个概念, 用来计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面,从而提 ...
1.react生命周期详解(2020.12.05)
刚敲完vue的生命周期,现在来敲敲react的生命周期,当然生命周期只针对类组件(我很不常用类组件). raect生命周期(v16之前) initialization(初始化阶段) mounting( ...
linux服务器部署react项目步骤详解
一.安装node环境下载软件包 wget https://nodejs.org/dist/v11.10.0/node-v11.10.0-linux-x64.tar.gz 解压 tar ...
【React】路由详解
文章目录 Router 介绍 Router 原理 Router 安装 Router 使用 Link 和 NavLink Route 属性 path 属性 exact 属性 Route 组件 compo ...
Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍今年1月份,新开源的react- ...
ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...

React之Protals详解

React之Protals详解相关推荐

最新文章

热门文章