這篇文章給大家介紹React中怎么實現(xiàn)Portal可復用組件，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為恩平企業(yè)提供專業(yè)的成都網(wǎng)站設計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設公司，恩平網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
1、通常你的網(wǎng)站只有一個root
2、使用Portal之后，可以變成下面這樣
Portal高階組件封裝
Portal的demo在官網(wǎng)上可以看到，而我們要實現(xiàn)的是將它封裝成一個可以復用的組件。
目標
不需要手動在body下面增加HTML，通過組件自己去創(chuàng)建。
此處插入div或者react組件
實現(xiàn)方案
1、創(chuàng)建一個createPortal函數(shù)，該函數(shù)將會return一個Portal組件
重慶分公司
重慶分公司
function createPortal() {
}
export default createPortal()2、創(chuàng)建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函數(shù)實現(xiàn)，用createPortal創(chuàng)建portal。
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}4、componentDidMount函數(shù)實現(xiàn)，將dom添加到body下面
componentDidMount() {
document.body.appendChild(this.el);
}5、componentWillUnmount函數(shù)實現(xiàn)，清除DOM結構
componentWillUnmount() {
document.body.removeChild(this.el)
}6、實現(xiàn)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中怎么實現(xiàn)Portal可復用組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
