首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-14 11:45:42
原創
1773 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板