react的核心之一是组件，本文主要给大家介绍了关于react教程之封装一个portal可复用组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
portal简介
所以我们需要的一个通用组件，它做如下的事情：
可以声明式的写在一个组件中
并不真正render在被声明的地方
支持过渡动画
那么，像modal、tooltip、notification等组件都是可以基于这个组件的。我们叫这个组件为portal。
使用了react16+的你，对portal至少有所了解或者熟练使用。
portal可以创建一个在你的root元素之外的dom。
1、通常你的网站只有一个root
<body>
<p id="root"></p>
</body>
2、使用portal之后，可以变成下面这样
<body>
<p id="root"></p>
<p id="portal"></p>
</body>
portal高阶组件封装
portal的demo在官网上可以看到，而我们要实现的是将它封装成一个可以复用的组件。
目标
不需要手动在body下面增加html，通过组件自己去创建。
<createportal
id, //可以传入id
classname, //可以传入classname
style //可以传入style
>
此处插入p或者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('p')
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('p')
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实现思想类似，用函数式编程的思想来完成目标。如果你觉得这东西有用，拿去用吧。
相关推荐：
oracle portal及其门户网站开发概述
liferay学习笔记（一）liferay portal5.2.3环境的初步搭建
oracle fusion middleware ⅱ: weblogic、ucm、webcenter portal
以上就是react封装一个portal可复用组件的实例代码的详细内容。