React教程之封裝一個(gè)Portal可復(fù)用組件的方法

更新時(shí)間：2018年01月02日 10:02:18 作者：二月

react的核心之一是組件，下面這篇文章主要給大家介紹了關(guān)于React教程之封裝一個(gè)Portal可復(fù)用組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

Portal簡(jiǎn)介

所以我們需要的一個(gè)通用組件，它做如下的事情：

可以聲明式的寫(xiě)在一個(gè)組件中
并不真正render在被聲明的地方
支持過(guò)渡動(dòng)畫(huà)

那么，像modal、tooltip、notification等組件都是可以基于這個(gè)組件的。我們叫這個(gè)組件為Portal。

使用了React16+的你，對(duì)Portal至少有所了解或者熟練使用。

Portal可以創(chuàng)建一個(gè)在你的root元素之外的DOM。

1、通常你的網(wǎng)站只有一個(gè)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)的是將它封裝成一個(gè)可以復(fù)用的組件。

目標(biāo)

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

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

實(shí)現(xiàn)方案

1、創(chuàng)建一個(gè)createPortal函數(shù)，該函數(shù)將會(huì)return一個(gè)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()

總結(jié)

createPortal和Provide實(shí)現(xiàn)思想類似，用函數(shù)式編程的思想來(lái)完成目標(biāo)。如果你覺(jué)得這東西有用，拿去用吧。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: