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

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

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

1、通常你的網站只有一個root

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

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

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

Portal高階組件封裝

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

目標

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

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

實現(xiàn)方案

1、創(chuàng)建一個createPortal函數，該函數將會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函數實現(xiàn)，用createPortal創(chuàng)建portal。

render() {
 return ReactDOM.createPortal(
  this.props.children,
  this.el
 )
}

4、componentDidMount函數實現(xiàn)，將dom添加到body下面

componentDidMount() {
 document.body.appendChild(this.el);
}

5、componentWillUnmount函數實現(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可復用組件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

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

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

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

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

猜你還喜歡下面的內容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

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