react portals
来源:https://segmentfault.com/a/1190000011668286
Portals
是react 16.3 提供的官方解决方案,使得组件可以脱离父组件层级挂载在DOM树的任何位置。
普通情况下,组件的render函数返回的元素会被挂载在它的父级组件上。
import DemoComponent from './DemoComponent';
render() {
// DemoComponent元素会被挂载在id为parent的div的元素上
return (
<div id="parent">
<DemoComponent />
</div>
);
}
然而,有些元素需要被挂载在更高层级的位置。最典型的应用场景:当父组件具有overflow: hidden
或者z-index
的样式设置时,组件有可能被其他元素遮挡,这个时候你就可以考虑要不要使用Portal使组件的挂载脱离父组件。例如:对话框,tooltip。
import DemoComponent from './DemoComponent'; render() {
// react会将DemoComponent组件直接挂载在真真实实的 dom 节点 domNode 上,生命周期还和16版本之前相同。
return ReactDOM.createPortal(
<DemoComponent />,
domNode,
);
}
组件的挂载点虽然可以脱离父组件,但组件的事件通过冒泡机制仍可以传给父组件。
官方domo
// These two containers are siblings in the DOM
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root'); class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
} componentDidMount() {
modalRoot.appendChild(this.el);
} componentWillUnmount() {
modalRoot.removeChild(this.el);
} render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
} class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {clicks: };
this.handleClick = this.handleClick.bind(this);
} handleClick() {
// This will fire when the button in Child is clicked,
// updating Parent's state, even though button
// is not direct descendant in the DOM.
this.setState(prevState => ({
clicks: prevState.clicks +
}));
} render() {
return (
<div onClick={this.handleClick}>
<p>Number of clicks: {this.state.clicks}</p>
<p>
Open up the browser DevTools
to observe that the button
is not a child of the div
with the onClick handler.
</p>
<Modal>
<Child />
</Modal>
</div>
);
}
} function Child() {
// The click event on this button will bubble up to parent,
// because there is no 'onClick' attribute defined
return (
<div className="modal">
<button>Click</button>
</div>
);
} ReactDOM.render(<Parent />, appRoot);
react portals的更多相关文章
- react portals 插槽 实现简易弹窗
Portal 提供了一种将子节点渲染到存在于父节点以外的DOM节点的优秀方案: 尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致. ...
- ZooTeam 前端周刊|第 111期
转: ZooTeam 前端周刊|第 111期 ZooTeam 前端周刊|第 111期 浏览更多往期周刊,请访问: https://weekly.zoo.team 基于Vue的前端架构,我做了这15点 ...
- 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件
React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...
- react 插槽(Portals)
前言: 昨天刚看了插槽,以为可以解决我工作中遇到的问题,非常激动,我今天又仔细想了想,发现并不能解决... 不过还是记录一下插槽吧,加深印象,嗯,就酱. 插槽作用: 插槽即:ReactDOM.crea ...
- [React] Render Elements Outside the Current React Tree using Portals in React 16
By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI el ...
- React——组件的生命周期函数
每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...
- [译文]React v16(新特性)
[译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...
- React 特性剪辑(版本 16.0 ~ 16.9)
Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
随机推荐
- ceph存储集群性能测试工具步骤(初稿)
一.源码安装fio工具: #yum install libaio-devel make #wget http://brick.kernel.dk/snaps/fio-2.2.10.tar.gz #ta ...
- 51单片机数据类型int,float,指针所占字节数
1.int===2个字节 2.sfr===特殊功能寄存器,也是一种扩充数据类型,占用1个内存单元,利用它可以访问51单片机内的所有特殊功能寄存器. sfr P1 = 0x90;/////////这一句 ...
- Shell 脚本元组+for循环
#!/bin/bash#by:V log_dir=(/data/logs/anjubao_syncapi /data/logs/anjubao_wechat) daytime=`date -d ' - ...
- 通过位运算求两个数的和(求解leetcode:371. Sum of Two Integers)
昨天在leetcode做题的时候做到了371,原题是这样的: 371. Sum of Two Integers Calculate the sum of two integers a and b, b ...
- leetcode 846.Hand of Straights
对于一个数组中的数分为W组且在每一组内的数是连续存在的. 考虑使用map映射来记录每个数的个数的,并且对于数组中的数进行从小到大的排列的.同时每次需要更新最开始的那个起始数的,可能是以及出现的也可能是 ...
- A Statistical Model for Scientific Readability-paper
Authors: Luo SiCarnegie Mellon University, Pittsburgh, PA Jamie CallanCarnegie Mellon University, Pi ...
- select添加option
本文介绍select添加option的两种方法 1.使用selectObject.add(option,before)方法,其中 option为要添加选项元素.必需是 option 或 optgrou ...
- memcache 应用场景
一..memcache应用场景 1.应用场景一: 缓解数据库压力,提高交互速度.它的一个总原则是将经常需要从数据库读取的数据缓存在memcached中.这些数据也分为几类: (1).经常被读取并且实时 ...
- JavaScript 快速排序详解
使用的是<JavaScript数据结构与算法>一书中的快速排序,并加上自己的理解. 经测试,此算法的速度比内置的 sort 更快!而阮一峰的那个快排更像是归并排序,虽然写法简单很多,但是性 ...
- crm --- 1.admin , 展示列表 和 分页
一.admin (创建超级用户) 1.注册: 1.创建一个超级管理员,使用如下命令: python manage.py createsuperuser 2.输入打算使用的登录名: username:m ...