React系列——封装一个Portal可复用组件

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

React系列——封装一个Portal可复用组件

Portal简介

Portal高阶组件封装

目标

实现方案

总结

猜你在找的React相关文章