React教程之封裝一個Portal可復(fù)用組件的方法
Portal簡介
所以我們需要的一個通用組件,它做如下的事情:
- 可以聲明式的寫在一個組件中
- 并不真正render在被聲明的地方
- 支持過渡動畫
那么,像modal、tooltip、notification等組件都是可以基于這個組件的。我們叫這個組件為Portal。
使用了React16+的你,對Portal至少有所了解或者熟練使用。
Portal可以創(chuàng)建一個在你的root元素之外的DOM。
1、通常你的網(wǎng)站只有一個root
<body> <div id="root"></div> </body>
2、使用Portal之后,可以變成下面這樣
<body> <div id="root"></div> <div id="portal"></div> </body>
Portal高階組件封裝
Portal的demo在官網(wǎng)上可以看到,而我們要實現(xiàn)的是將它封裝成一個可以復(fù)用的組件。
目標(biāo)
不需要手動在body下面增加HTML,通過組件自己去創(chuàng)建。
<CreatePortal id, //可以傳入id className, //可以傳入className style //可以傳入style > 此處插入div或者react組件 </CreatePortal>
實現(xiàn)方案
1、創(chuàng)建一個createPortal函數(shù),該函數(shù)將會return一個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ù)實現(xiàn),用createPortal創(chuàng)建portal。
render() { return ReactDOM.createPortal( this.props.children, this.el ) }
4、componentDidMount函數(shù)實現(xiàn),將dom添加到body下面
componentDidMount() { document.body.appendChild(this.el); }
5、componentWillUnmount函數(shù)實現(xiàn),清除DOM結(jié)構(gòu)
componentWillUnmount() { document.body.removeChild(this.el) }
6、實現(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實現(xiàn)思想類似,用函數(shù)式編程的思想來完成目標(biāo)。如果你覺得這東西有用,拿去用吧。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案
最近在學(xué)習(xí)React的過程中遇到了路由跳轉(zhuǎn)后頁面不刷新的問題,本文就詳細(xì)的介紹一下解決方法,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06React使用Canvas繪制大數(shù)據(jù)表格的實例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個很不錯的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以自己動手試試2023-09-09react+zarm實現(xiàn)底部導(dǎo)航欄的示例代碼
本文主要介紹了react?+?zarm?實現(xiàn)底部導(dǎo)航欄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05