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

时间：2021-05-26

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章