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

尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 React 树, 且与 DOM 树 中的位置无关,那么无论其子节点是否是 portal,像 context 这样的功能特性都是不变的。

这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 React 树*的祖先,即便这些元素并不是 *DOM 树 中的祖先

通俗来讲就是假设父节点app-root 通过 ReactDOM.createPortal 将它的子节点,挂载到它的兄弟节点modal-root上,父节点app-root的Partal组件仍然能狗捕获到该子节点冒泡上来的事件。

下面来实现一个建议的弹窗功能

创建Portal插槽组件MsgConten

import React from 'react';
import ReactDOM from "react-dom"; class Model extends React.Component{ constructor(props) {
super(props);
this.el = document.createElement('div');
this.modelRoot = document.getElementById('model-root');
} componentDidMount(){
     //将插入弹窗的div放入到兄弟节点“model-root”中
this.modelRoot.appendChild(this.el);
}
//清理工作
componentWillUnmount() {
this.modelRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal((//将创建好的弹窗插入到创建的div元素中
<MsgWindow closeModel={this.props.closeModel}/>
), this.el);
}
}
//弹窗
function MsgWindow(props) {
return(
<div className={'cover'} style={{background:'grey',width:'200px',height:'200px',margin: '0 auto'}}>
<button onClick={props.closeModel}>关闭</button>
<div style={{color:'#ffffff'}}>
我是app-root的子节点,但被渲染在它的兄弟节点model-root上
</div>
</div>
)
} export default Model;

创建两个兄弟节点app-root和model-root

import React,{Component} from 'react';
import Model from './MsgConten'; class Portals extends Component{ state={
showMsg:false
}; handleMsgWindow(){
this.setState({
showMsg:!this.state.showMsg
})
} render() {
return (
<>
<div id={"app-root"} >
{(this.state.showMsg == true)?<Model isShow={this.state.showMsg} closeModel={this.handleMsgWindow.bind(this)}/>:null}
<button onClick={this.handleMsgWindow.bind(this)}>portals</button>
</div>
<div id={"model-root"}></div>
</>
)
}
} export default Portals;

运行效果如下

react portals 插槽 实现简易弹窗的更多相关文章

  1. react portals

    来源:https://segmentfault.com/a/1190000011668286 Portals是react 16.3 提供的官方解决方案,使得组件可以脱离父组件层级挂载在DOM树的任何位 ...

  2. react 全局公共组件-----动态弹窗 (dialog)

    react 的时候,总是会用到弹窗,并且各种各样的,一般来说,组件层级嵌套之后,就会出现 z-index层级覆盖的问题 这个时候,就需要一个公共的弹出层,然后我们将需要展示的组件,放到弹出层里面 下面 ...

  3. react中使用redux简易案例讲解

    为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...

  4. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  5. React Native之持久化存储(AsyncStorage、react-native-storage)的使用

    AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...

  6. [React] react-interview-01

    1.render 函数中 return 如果没有使用()会有什么问题? 我们在使用 JSX 语法书写 react 代码时,babel 会将 JSX 语法编译成 js,同时会在每行自动添加分号(:),如 ...

  7. React 系列教程2:编写兰顿蚂蚁演示程序

    简介 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西.因无意中看到生命游戏的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React. 兰顿蚂蚁的规则非常简单: ...

  8. React 精要面试题讲解(五) 高阶组件真解

    说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...

  9. Smobiler实现手机弹窗

    前言 在实际项目中有很多场景需要用到弹窗,如图1 那么这些弹窗在Smobiler中如何实现呢? 正文 Smobiler实现弹窗有两种方式:1.MessageBox.Show 2.ShowDialog和 ...

随机推荐

  1. CIEDE2000色差公式相关

    色差公式发展的三个重要的阶段:1976年以前(CIELAB和CIELUV的采用).1976年到2001年(CIEDE2000色差公式的推荐).2001年以后. 国际照明委员会1998年成立了技术委员会 ...

  2. LC 983. Minimum Cost For Tickets

    In a country popular for train travel, you have planned some train travelling one year in advance.  ...

  3. Qt编写数据可视化大屏界面电子看板4-布局另存

    一.前言 布局另存是数据可视化大屏界面电子看板系统中的额外功能之一,主要用于有时候用户需要在现有布局上做个微调,然后直接将该布局另存为一个布局配置文件使用,可以省略重新新建布局重新来一次大的调整的工作 ...

  4. PAT 甲级 1020 Tree Traversals (25 分)(二叉树已知后序和中序建树求层序)

    1020 Tree Traversals (25 分)   Suppose that all the keys in a binary tree are distinct positive integ ...

  5. web框架学习路线

    0.配置 1.路由 2.view 3.model 4.序列化与反序列化. 5.auth&permission 6.header处理 7.http client

  6. Django:(01) 关于什么是Django?

    一.从 WSGI 开始了解 Django 在了解 Django 之前有必要先了解一下 Python 被用于 Web 开发的基础协议——WSGI. 在开发 web 应用时,我们不希望接触到TCP连接.H ...

  7. Leetcode之分治法专题-654. 最大二叉树(Maximum Binary Tree)

    Leetcode之分治法专题-654. 最大二叉树(Maximum Binary Tree) 给定一个不含重复元素的整数数组.一个以此数组构建的最大二叉树定义如下: 二叉树的根是数组中的最大元素. 左 ...

  8. Django之session详解

    好文章来自追风的小蚂蚁:https://www.cnblogs.com/zhuifeng-mayi/p/9099811.html cookie:Cookie,有时也用其复数形式 Cookies,指某些 ...

  9. Connect4 Game

    How this game is playe can be found at here. public class Connect4 { ][]; public Connect4(char[][] b ...

  10. LINUX添加新的用户账号并赋予root权限

    一:添加新的用户账号使用 useradd 命令 语法:     useradd  选项  用户名 示例:      # 添加用户,设定登录目录:useradd -d  /home/admin -m a ...