React如何将组件渲染到指定DOM节点详解


Posted in Javascript onSeptember 08, 2017

前言

众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件。但是有时候还是会有些限制的,尤其是他的API中,不能控制组件所应该渲染到的DOM节点,这就让一些弹层组件很难控制。当父元素设置为overflow:hidden 的时候,问题就会出现了。

例如就像下面的这样:

React如何将组件渲染到指定DOM节点详解

我们实际期待的效果是这样的:

React如何将组件渲染到指定DOM节点详解

幸运的是,虽然不是很明显,但有一个相当优雅的方式来绕过这个问题。我们学到的第一个react函数是render 方法,他的函数签名是这样的:

ReactComponent render(
 ReactElement element,
 DOMElement container,
 [function callback]
)

通常情况下我们使用该方法将整个应用渲染到一个DOM节点中。好消息是该方法并不仅仅局限于此。我们可以在一个组件中,使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。作为一个组件的render 方法,其必须是纯净的(例如:不能改变state或者与DOM交互).所以我们需要在componentDidUpdate 或者 componentDidMount 中调用ReactDom.render 方法。

另外我们需要确保在父元素被卸载的时候,改组件也要被卸载掉.

整理下,我们得到下面的一个组件:

import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super();
 }
 componentDidMount(){//新建一个div标签并塞进body
  this.popup = document.createElement("div");
  document.body.appendChild(this.popup);
  this._renderLayer();
 }
 componentDidUpdate() {
  this._renderLayer();
 }
 componentWillUnmount(){//在组件卸载的时候,保证弹层也被卸载掉
  ReactDom.unmountComponentAtNode(this.popup);
  document.body.removeChild(this.popup);
 }
 _renderLayer(){//将弹层渲染到body下的div标签
  ReactDom.render(this.props.children, this.popup);
 }
 render(){
  return null;
 }
}

总结下就是:

在componentDidMount的时候手动向body内塞一个div标签,然后使用ReactDom.render 将组件渲染到这个div标签

当我们想把组件直接渲染到body上的时候,只需要在该组件的外面包一层RenderInBody 就可以了.

export default class Dialog extends Component{
 render(){
  return {
   <RenderInBody>i am a dialog render to body</RenderInBody>
  }
 }
}

译者增加:

将以上组件改造一下,我们就可以向指定的dom节点中渲染和卸载组件,并加上位置控制,如下:

//此组件用于在body内渲染弹层
import React,{Component} from 'react'
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super(p);
 }
 componentDidMount(){
  /**
  popupInfo={
   rootDom:***,//接收弹层组件的DOM节点,如document.body
   left:***,//相对位置
   top:***//位置信息
  }
  */
  let {popupInfo} = this.props; 
  this.popup = document.createElement('div');
  this.rootDom = popupInfo.rootDom;  
  this.rootDom.appendChild(this.popup);
  //we can setAttribute of the div only in this way
  this.popup.style.position='absolute';
  this.popup.style.left=popupInfo.left+'px';
  this.popup.style.top=popupInfo.top+'px';
  this._renderLayer()
 }
 componentDidUpdate() {
  this._renderLayer();
 }
 componentWillUnmount(){
  this.rootDom.removeChild(this.popup);
 }
 _renderLayer(){
  ReactDom.render(this.props.children, this.popup);
 }
 render(){
  return null;
 }
}

注:位置获取和根结点判断函数

export default (dom,classFilters)=> {
 let left = dom.offsetLeft,
  top = dom.offsetTop + dom.scrollTop,
  current = dom.offsetParent,
  rootDom = accessBodyElement(dom);//默认是body
 while (current !=null ) {
  left += current.offsetLeft;
  top += current.offsetTop;
  current = current.offsetParent;
  if (current && current.matches(classFilters)) {
   rootDom = current;
   break;
  }
 }
 return { left: left, top: top ,rootDom:rootDom};
}
/***
1. dom:为响应弹层的dom节点,或者到该dom的位置后,可以做位置的微调,让弹层位置更佳合适
*
2. classFilters:需要接收弹层组件的DOM节点的筛选类名
/

原文地址

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
js操作二进制数据方法
Mar 03 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
原生js实现简单的模态框示例
Sep 08 #Javascript
javascript 面向对象实战思想分享
Sep 07 #Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 #Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 #Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
python制作花瓣网美女图片爬虫
2015/10/28 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python gdal安装与简单使用
2019/08/01 Python
wxpython布局的实现方法
2019/11/01 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
九州传奇上机题
2014/07/10 面试题
营业员实习自我鉴定
2013/12/07 职场文书
行政专员岗位职责
2014/01/02 职场文书
个人近期表现材料
2014/02/11 职场文书
商务考察邀请函模板
2015/02/02 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
学习雷锋主题班会
2015/08/14 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL