这次是使用了一个比较罕见的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的更多相关文章

  1. React native 的弹出层(输入)效果

    /*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...

  2. react学习之弹出层

    react的弹出层不同于以往的DOM编程,我们知道,在DOM中,弹出层事件绑定在对应的节点上即可,但是在react中,往往只能实现父子之间的传递控制,显然,弹出层的层级不符合此关系. 在这里我们需要使 ...

  3. 利用React/anu编写一个弹出层

    本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...

  4. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  5. React Portal - 弹出层的优秀解决方案

    对于需要使用弹出层的需求 ,Portal可以说是提供了一种完美的解决方案.相比于React Native中的实现更多的使用Modal或者绝对定位,Portal实在是简易友好得多. 场景 对话框,确认提 ...

  6. 一步步编写avalon组件01:弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  7. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

随机推荐

  1. css样式,高斯模糊

    .blur-container.blur-3 { --bg: url("background.jpg"); background-image: var(--bg); } .blur ...

  2. MybatisUtil的使用,便于产生SqlSession

    简化代码,实现一个静态的工具类来实现获取SqlSession 主要有getSqlSessionFactory()和getSqlSession() public class MybatisUtil { ...

  3. 第7章 网络层协议(4)_IGMP协议

    4. IGMP协议(Internet Group Management Protocol) 4.1 什么是组播(多播) (1)单播同一个视频要发送90个副本,但支持收看者“快进”和“倒退”. (2)组 ...

  4. FFMPEG 中dts和pts区别

    FFMPEG 中dts和pts区别     CopyFrom:http://www.cnblogs.com/yinxiangpei/articles/3892982.html 视频的显示和存放原理 对 ...

  5. mobx.js 使用教程-react

    1.store: import { observer } from "mobx-react"; import { observable, action, computed ,aut ...

  6. c helloworld

    #include <stdio.h> int main() { int i; printf("%s","hello, world"); } 1.#i ...

  7. SVN上拖下来的项目,缺少build path怎么办?

    在eclipse里用subeclipe从svn上拖下来的项目,看不见java build path怎么办? 原因那是因为你的两个配置文件:.project .classpath没有内容或者缺失. 重新 ...

  8. 转载:centos安装redis

    转载自:https://www.cnblogs.com/renzhicai/p/7773080.html CentOS下Redis的安装 [TOC] 前言 安装Redis需要知道自己需要哪个版本,有针 ...

  9. C# WPF 文件复制,相对路径

    /// <summary> /// 下载/复制 /// </summary> /// <param name="sender"></par ...

  10. if、else、elif

    if后面+判断条件 elif后面+判断条件 else 否则进行某些操作 举个列子 1 a = raw_input(">>>") 2 if a == "h ...