React教程之封裝一個(gè)Portal可復(fù)用組件的方法
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ì)腳本之家的支持。
相關(guān)文章
使用React實(shí)現(xiàn)輪播效果組件示例代碼
React剛出來(lái)不久,組件還比較少,不像jquery那樣已經(jīng)有很多現(xiàn)成的插件了,于是自己寫(xiě)了一個(gè)基于React的輪播效果組件,現(xiàn)在分享給大家,有需要的可以參考借鑒。2016-09-09react 跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案
最近在學(xué)習(xí)React的過(guò)程中遇到了路由跳轉(zhuǎn)后頁(yè)面不刷新的問(wèn)題,本文就詳細(xì)的介紹一下解決方法,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件
這篇文章主要介紹了React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06React使用Canvas繪制大數(shù)據(jù)表格的實(shí)例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個(gè)很不錯(cuò)的Canvas繪圖框架Leafer,api很友好就試著寫(xiě)了一下,文中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以自己動(dòng)手試試2023-09-09react+zarm實(shí)現(xiàn)底部導(dǎo)航欄的示例代碼
本文主要介紹了react?+?zarm?實(shí)現(xiàn)底部導(dǎo)航欄的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05react實(shí)現(xiàn)全局組件確認(rèn)彈窗
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)全局組件確認(rèn)彈窗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08