这篇文章给大家介绍React中怎么实现Portal可复用组件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。1、通常你的网站只有一个root<body> <
这篇文章给大家介绍React中怎么实现Portal可复用组件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
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()关于React中怎么实现Portal可复用组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
--结束END--
本文标题: React中怎么实现Portal可复用组件
本文链接: https://www.lsjlt.com/news/78243.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0