Portal簡介
所以我們需要的一個通用組件，它做如下的事情：
那么，像modal、tooltip、notification等組件都是可以基于這個組件的。我們叫這個組件為Portal。
使用了React16+的你，對Portal至少有所了解或者熟練使用。
Portal可以創建一個在你的root元素之外的DOM。
1、通常你的網站只有一個root
<body> <div id="root"></div></body>
2、使用Portal之后，可以變成下面這樣
<body> <div id="root"></div> <div id="portal"></div></body>
Portal高階組件封裝
Portal的demo在官網上可以看到，而我們要實現的是將它封裝成一個可以復用的組件。
目標
不需要手動在body下面增加HTML，通過組件自己去創建。
<CreatePortal id, //可以傳入id className, //可以傳入className style //可以傳入style > 此處插入div或者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('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()總結
createPortal和Provide實現思想類似，用函數式編程的思想來完成目標。如果你覺得這東西有用，拿去用吧。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
