React/anu实现弹出层2
这次是使用了一个比较罕见的APIReactDOM.unstable_renderSubtreeIntoContainer,ReactDOM.unstable_renderSubtreeIntoContainer与ReactDOM.render 的区别是,一个能传parentContext,一个不能。
function RealModal (props){
return <div className='modal'>{props.children}</div>
}
class Modal extends React.Component {
appendMaskIntoDoc() {
console.log(this)
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
<RealModal {...this.props}>
{this.props.children}
</RealModal>,
this.container
)
}
componentDidMount() {
var div = this.container = document.createElement('div')
div.innerHTML = '<p>1111</p><p>222</p>'
div.className = 'placeholder'
document.body.appendChild(div)
this.appendMaskIntoDoc()
}
componentDidUpdate() {
console.log('更新')
this.appendMaskIntoDoc()
}
componentWillUnmount() {
console.log('componentWillUnmount')
document.body.removeChild(this.container)
}
render() {
return null
}
}
window.onload = function(){
ReactDOM.render(<Modal title="aaa">99999</Modal>, document.getElementById('select'))
setTimeout(function(){
ReactDOM.render(<Modal title="aaa">新内容</Modal>, document.getElementById('select'))
},500)
}
React/anu实现弹出层2的更多相关文章
- React native 的弹出层(输入)效果
/*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...
- react学习之弹出层
react的弹出层不同于以往的DOM编程,我们知道,在DOM中,弹出层事件绑定在对应的节点上即可,但是在react中,往往只能实现父子之间的传递控制,显然,弹出层的层级不符合此关系. 在这里我们需要使 ...
- 利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- React Portal - 弹出层的优秀解决方案
对于需要使用弹出层的需求 ,Portal可以说是提供了一种完美的解决方案.相比于React Native中的实现更多的使用Modal或者绝对定位,Portal实在是简易友好得多. 场景 对话框,确认提 ...
- 一步步编写avalon组件01:弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
随机推荐
- HDFS 入门介绍
HDFS简介 HDFS(Hadoop Distributed File System,Hadoop分布式文件系统),它是一个高度容错性的系统,适合部署在廉价的机器上.HDFS能提供高吞吐量的数据访问, ...
- 2018/11/5 每日分析-test
郑醇1901,M30向上一笔中,只是看起来不太值得做,主要因为现在30分钟向上一笔空间无法判定,未必能上去(M5中枢如果向上突破并且不背驰才可能有机会:如果直接下去或者向上后背驰,那么这里就只是一个M ...
- java下载excel,excel从数据库获取数据
<!-- poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId&g ...
- 第7课 列表初始化(2)_分析initializer_list<T>的实现
1. 初始化列表的实现 (1)当编译器看到{t1,t2…tn}时便会生成一个initializer_list<T>对象(其中的T为元素的类型),它关联到一个array<T,n> ...
- 第1章 计算机网络和协议(2)_OSI参考模型
2. OSI参考模型 2.1 OSI参考模型详解 (1)参考模型的优点 ①将网络的通信过程划分为小一些.功能简单的部件,有助于各个部件开发.设计和故障排除. ②通过网络组件的标准化,允许多个供应商进行 ...
- mysql的DATE_FORMAT参数格式
mysql有个字段是DATETIME类型,要实现可以按月统计,该怎么写sql语句?select month(f1) from tt group by month(f1)or select DATE_F ...
- 深入理解Apache Flink
Apache Flink(下简称Flink)项目是大数据处理领域最近冉冉升起的一颗新星,其不同于其他大数据项目的诸多特性吸引了越来越多人的关注.本文将深入分析Flink的一些关键技术与特性,希望能够帮 ...
- 【LeetCode】4. 寻找两个有序数组的中位数
给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nums2 ...
- uuid.uuid4().hex
uuid.uuid4().hex .hex 将生成的uuid字符串中的 - 删除
- 安装python的jupyter notebook工具
jupyter notebook是一个通过网页运行python的工具 支持分段的python运行,并能直观的查看结果 支持多python环境运行,需要加装(conda) 安装步骤 1.安装python ...