React封裝一個Portal可重複使用元件的實例碼
- 小云云原創
- 2018-01-03 09:31:432369瀏覽
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 '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函數實現，用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('p')
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('p')
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()
總結
createPortal和Provide實作思想類似，用函數式程式設計的想法來完成目標。如果你覺得這東西有用，就拿去用吧。
相關建議：
Liferay學習筆記（一）Liferay Portal5.2.3環境的初步搭建
Oracle Fusion Middleware Ⅱ: Weblogic、UCM、WebCenter Portal
以上是React封裝一個Portal可重複使用元件的實例碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！