微信小程序潜在优势_React教程之封装一个Portal可

2021-01-11 10:51 admin
React教程之封装一个Portal可复用组件的方法       react的核心之一是组件,下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。

那么,像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.pro凡科抠图.children,
 this.el
}
componentDidMount() {
 document.body.appendChild(this.el);
}
componentWillUnmount() {
 document.body.removeChild(this.el)
 }

6、实现pro凡科抠图,包括id、className、style

constructor(pro凡科抠图) {
 super(pro凡科抠图)
 this.el = document.createElement('div')
 if (!!pro凡科抠图) {
 this.el.id = pro凡科抠图.id || false
 if (pro凡科抠图.className) this.el.className = pro凡科抠图.className
 if (pro凡科抠图.style) {
 Object.keys(pro凡科抠图.style).map((v) = {
 this.el.style[v] = pro凡科抠图.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(pro凡科抠图) {
 super(pro凡科抠图)
 this.el = document.createElement('div')
 if (!!pro凡科抠图) {
 this.el.id = pro凡科抠图.id || false
 if (pro凡科抠图.className) this.el.className = pro凡科抠图.className
 if (pro凡科抠图.style) {
 Object.keys(pro凡科抠图.style).map((v) = {
 this.el.style[v] = pro凡科抠图.style[v]
 document.body.appendChild(this.el)
 componentDidMount() {
 document.body.appendChild(this.el);
 componentWillUnmount() {
 document.body.removeChild(this.el)
 render() {
 return ReactDOM.createPortal(
 this.pro凡科抠图.children,
 this.el
 Portal.propTypes = {
 style: PropTypes.object
 return Portal
export default createPortal()

总结

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

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