React教程之封装一个Portal可复用组件的方法
更新时间：2018年01月02日 10:02:18 作者：二月
react的核心之一是组件，下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
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实现思想类似，用函数式编程的思想来完成目标。如果你觉得这东西有用，拿去用吧。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了React实现轮播图效果，使用react-slick组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了React hooks组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react hooks中常用的父子、跨组件通信的方法，需要的朋友可以参考下2022-08-08
redux-toolkit是目前redux官方推荐的编写redux逻辑的方法，针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化，官方总结了四个特点是简易的/有想法的/强劲的/高效的，总结来看，就是更加的方便简单了2022-12-12
本文给大家介绍了jenkins部署vue/react项目的问题，文末给大家提到了centOS安装jenkins的脚本，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-02-02
本篇文章主要介绍了使用React全家桶搭建一个后台管理系统，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容，本文就介绍了React实现一个通用骨架屏组件示例，分享给大家，感兴趣的可以了解一下2021-12-12
这篇文章主要为大家详细介绍了React实现pc端的弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家介绍了React优雅的封装SvgIcon组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本篇文章主要介绍了React根据宽度自适应高度的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家介绍了Redis数据结构高频面试问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论