Portal简介
所以我们需要的一个通用组件，它做如下的事情：
那么，像modal、tooltip、notification等组件都是可以基于这个组件的。我们叫这个组件为Portal。
使用了React16+的你，对Portal至少有所了解或者熟练使用。
Portal可以创建一个在你的root元素之外的DOM。
1、通常你的网站只有一个root
2、使用Portal之后，可以变成下面这样
Portal高阶组件封装
Portal的demo在官网上可以看到，而我们要实现的是将它封装成一个可以复用的组件。
目标
不需要手动在body下面增加HTML，通过组件自己去创建。
此处插入div或者react组件
实现方案
1、创建一个createPortal函数，该函数将会return一个Portal组件
functioncreatePortal(){
}
exportdefaultcreatePortal()
2、创建Portal组件
importReactfrom'react'
importReactDOMfrom'react-dom'
importPropTypesfrom'prop-types'
functioncreatePortal(){
classPortalextendsReact.Component{
}
returnPortal
}
exportdefaultcreatePortal()
3、render函数实现，用createPortal创建portal。
render(){
returnReactDOM.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、完整代码
importReactfrom'react'
importReactDOMfrom'react-dom'
importPropTypesfrom'prop-types'
functioncreatePortal(){
classPortalextendsReact.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(){
returnReactDOM.createPortal(
this.props.children,
this.el
)
}
}
Portal.propTypes={
style:PropTypes.object
}
returnPortal
}
exportdefaultcreatePortal()
总结
createPortal和Provide实现思想类似，用函数式编程的思想来完成目标。如果你觉得这东西有用，拿去用吧。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。