React中怎么實現(xiàn)Portal可復用組件-創(chuàng)新互聯(lián)

這篇文章給大家介紹React中怎么實現(xiàn)Portal可復用組件，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)是一家專業(yè)提供田林企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計、網(wǎng)站制作、html5、小程序制作等業(yè)務。10年已為田林眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進行中。

1、通常你的網(wǎng)站只有一個root

<body>
 <div id="root"></div>
</body>

2、使用Portal之后，可以變成下面這樣

<body>
 <div id="root"></div>
 <div id="portal"></div>
</body>

Portal高階組件封裝

Portal的demo在官網(wǎng)上可以看到，而我們要實現(xiàn)的是將它封裝成一個可以復用的組件。

目標

不需要手動在body下面增加HTML，通過組件自己去創(chuàng)建。

<CreatePortal
 id, //可以傳入id
 className, //可以傳入className
 style //可以傳入style
 >
 此處插入div或者react組件
</CreatePortal>

實現(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結(jié)構(gòu)

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()

關(guān)于React中怎么實現(xiàn)Portal可復用組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：React中怎么實現(xiàn)Portal可復用組件-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://www.chinadenli.net/article46/doioeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、企業(yè)建站、網(wǎng)站設(shè)計、網(wǎng)站策劃、動態(tài)網(wǎng)站、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

React中怎么實現(xiàn)Portal可復用組件-創(chuàng)新互聯(lián)