首頁 > 文章 > web前端 > 使用React如何封裝Portal可重複使用元件

使用React如何封裝Portal可重複使用元件

亚连原創: 2018-06-14 11:45:421694瀏覽

react的核心之一是元件，以下這篇文章主要為大家介紹了關於React教學之封裝一個Portal可重複使用元件的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考借鏡，下面一起學習學習吧。

Portal簡介

所以我們需要的一個通用元件，它做如下的事情：

可以聲明式的寫在一個元件中
並不真正render在被宣告的地方
支援過渡動畫

那麼，像是modal、tooltip、notification等元件都是可以基於這個元件的。我們叫這個組件為Portal。

使用了React16 的你，對Portal至少有所了解或熟練使用。

Portal可以創建一個在你的root元素之外的DOM。

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

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

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

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

Portal高階元件封裝

Portal的demo在官網上可以看到，而我們要實現的是將它封裝成一個可以重複使用的組件。

目標

不需要手動在body下面增加HTML，透過元件自己去建立。

<CreatePortal
 id, //可以传入id
 className, //可以传入className
 style //可以传入style
 >
 此处插入p或者react组件
</CreatePortal>

實作方案

1、建立一個createPortal函數，該函數將會return一個Portal元件

function createPortal() {

}
export default createPortal()

2、建立Portal元件

import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
import PropTypes from &#39;prop-types&#39;
function createPortal() {
 class Portal extends React.Component{
 }
 return Portal
}
export default createPortal()

3、render函數實現，用createPortal建立portal。

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

4、componentDidMount函數實現，將dom添加到body下面

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

5、componentWillUnmount函數實現，清除DOM結構

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

6、實現props，包括id、 className、style

constructor(props) {
 super(props)
 this.el = document.createElement(&#39;p&#39;)
 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 &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
import PropTypes from &#39;prop-types&#39;
function createPortal() {
 class Portal extends React.Component{
  constructor(props) {
   super(props)
   this.el = document.createElement(&#39;p&#39;)
   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()

上面是我整理給大家的，希望今後會對大家有幫助。

vuex之詳細介紹中文文件

如何解決Router跨模組跳轉問題

純js如何產生下拉清單

以上是使用React如何封裝Portal可重複使用元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html 封装 JS dom

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在實戰專案中使用bootstrap+selectpicker下拉框下一篇：如何在實戰專案中使用bootstrap+selectpicker下拉框

看更多