React中怎么實(shí)現(xiàn)Portal可復(fù)用組件

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

創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為恩平企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司，恩平網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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)上可以看到，而我們要實(shí)現(xiàn)的是將它封裝成一個可以復(fù)用的組件。

目標(biāo)

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

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

實(shí)現(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ù)實(shí)現(xiàn)，用createPortal創(chuàng)建portal。

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

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

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

5、componentWillUnmount函數(shù)實(shí)現(xiàn)，清除DOM結(jié)構(gòu)

componentWillUnmount() {
   document.body.removeChild(this.el)
  }

6、實(shí)現(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中怎么實(shí)現(xiàn)Portal可復(fù)用組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當(dāng)前名稱：React中怎么實(shí)現(xiàn)Portal可復(fù)用組件
文章位置：http://jinyejixie.com/article42/posihc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、定制開發(fā)

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

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

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

React中怎么實(shí)現(xiàn)Portal可復(fù)用組件