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

發(fā)布時間：2021-08-12 11:42:26 來源：億速云閱讀：249 作者：Leah 欄目：web開發(fā)

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

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)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽