React教程之封装一个Portal可复用组件的方法


Posted in Javascript onJanuary 02, 2018

Portal简介

所以我们需要的一个通用组件,它做如下的事情:

  • 可以声明式的写在一个组件中
  • 并不真正render在被声明的地方
  • 支持过渡动画

那么,像modal、tooltip、notification等组件都是可以基于这个组件的。我们叫这个组件为Portal。

使用了React16+的你,对Portal至少有所了解或者熟练使用。

Portal可以创建一个在你的root元素之外的DOM。

1、通常你的网站只有一个root

<body>
 <div id="root"></div>
</body>

2、使用Portal之后,可以变成下面这样

<body>
 <div id="root"></div>
 <div id="portal"></div>
</body>

Portal高阶组件封装

Portal的demo在官网上可以看到,而我们要实现的是将它封装成一个可以复用的组件。

目标

不需要手动在body下面增加HTML,通过组件自己去创建。

<CreatePortal
 id, //可以传入id
 className, //可以传入className
 style //可以传入style
 >
 此处插入div或者react组件
</CreatePortal>

实现方案

1、创建一个createPortal函数,该函数将会return一个Portal组件

function createPortal() {

}
export default createPortal()

2、创建Portal组件

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
 class Portal extends React.Component{
 }
 return Portal
}
export default createPortal()

3、render函数实现,用createPortal创建portal。

render() {
 return ReactDOM.createPortal(
  this.props.children,
  this.el
 )
}

4、componentDidMount函数实现,将dom添加到body下面

componentDidMount() {
 document.body.appendChild(this.el);
}

5、componentWillUnmount函数实现,清除DOM结构

componentWillUnmount() {
   document.body.removeChild(this.el)
  }

6、实现props,包括id、className、style

constructor(props) {
 super(props)
 this.el = document.createElement('div')
 if (!!props) {
  this.el.id = props.id || false
  if (props.className) this.el.className = props.className
  if (props.style) {
   Object.keys(props.style).map((v) => {
    this.el.style[v] = props.style[v]
   })
  }
  document.body.appendChild(this.el)
 }
}

7、完整代码

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
 class Portal extends React.Component{
  constructor(props) {
   super(props)
   this.el = document.createElement('div')
   if (!!props) {
    this.el.id = props.id || false
    if (props.className) this.el.className = props.className
    if (props.style) {
     Object.keys(props.style).map((v) => {
      this.el.style[v] = props.style[v]
     })
    }
    document.body.appendChild(this.el)
   }
  }
  componentDidMount() {
   document.body.appendChild(this.el);
  }
  componentWillUnmount() {
   document.body.removeChild(this.el)
  }
  render() {
   return ReactDOM.createPortal(
    this.props.children,
    this.el
   )
  }
 }
 Portal.propTypes = {
  style: PropTypes.object
 }
 return Portal
}
export default createPortal()

总结

createPortal和Provide实现思想类似,用函数式编程的思想来完成目标。如果你觉得这东西有用,拿去用吧。

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

Javascript 相关文章推荐
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
关于vue面试题汇总
Mar 20 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 #Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 #Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 #Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 #Javascript
基于wordpress的ajax写法详解
Jan 02 #Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 #Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 #Javascript
You might like
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Django Admin实现上传图片校验功能
2016/03/06 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
思想政治自我鉴定
2013/10/06 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
党的群众路线学习材料
2014/05/16 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
质量承诺书格式范文
2015/04/28 职场文书
活动经费申请报告
2015/05/15 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
食品安全主题班会
2015/08/13 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书