React好代码教程之封装一个Portal可复用组件的方法 | 您所在的位置:网站首页 › react如何封装axios › React好代码教程之封装一个Portal可复用组件的方法 |
雨后的草原,野花竞放,像一块刚浸过水的花头巾,连露珠儿也都是五颜六色的了!一条条小河宛如蓝色的缎带缠绕着一望无际的绿色田野,远处一座座造型古朴、色彩和谐的小屋,一派美丽动人的田园风光! Portal简介 所以我们需要的一个通用组件,它做如下的事情: 可以声明式的写在一个组件中 并不真正render在被声明的地方 支持过渡动画那么,像modal、tooltip、notification等组件都是可以基于这个组件的。我们叫这个组件为Portal。 使用了React16+的你,对Portal至少有所了解或者熟练使用。 Portal可以创建一个在你的root元素之外的DOM。 1、通常你的网站只有一个root 2、使用Portal之后,可以变成下面这样 Portal高阶组件封装 Portal的demo在官网上可以看到,而我们要实现的是将它封装成一个可以复用的组件。 目标 不需要手动在body下面增加HTML,通过组件自己去创建。 此处插入div或者react组件实现方案 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实现思想类似,用函数式编程的思想来完成目标。如果你觉得这东西有用,拿去用吧。 好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。 |
CopyRight 2018-2019 实验室设备网 版权所有 |