欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-09-04 08:47:22
portal简介 所以我们需要的一个通用组件，它做如下的事情： 可以声明式的写在一个组件中 并不真正render在被声明的地方 支持过渡动画...

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实现思想类似，用函数式编程的思想来完成目标。如果你觉得这东西有用，拿去用吧。

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

上一篇： 女儿长大了想当老师

下一篇： node实现的爬虫功能示例

推荐阅读