組件化對前端來講已是家常便飯，各種功能效果實現之后，冷不防產品又想讓在另一個模塊調用。簡單，Ctrl + c + v一通操作，幾十遍幾十上百行代碼不嫌煩的話完全OK的哈~。像我這么懶的人肯定是要利用組件一勞永逸哇。我們平時寫的組件一般是在當前頁面的某個元素節(jié)點下面使用，要是碰上一些蒙層或是需要置于頂層覆蓋的組件，避免元素的隱藏屬性則需要將組件放置于頁面外層。保存運行，哎喲臥槽怎么還有個節(jié)點蓋在上面，找出css加上z-index這才安心。在使用antui的時候會發(fā)現alert，popup的彈出層都是插入在body節(jié)點下面的，這就可以很舒服地決解避免被其他元素隱藏和層級問題，維護性較高。
這個牛皮啊怎么搞得，媽我學。這就需要用到ReactDOM.render，簡單實現一下：
1、工具類的方法
![BP$)SMOL_47E]ECIN_5F}XQ.png](https://upload-images.jianshu.io/upload_images/6272721-f54a064e8a96f482.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
class Utils {
constructor () {}
alert (view) {
let div = document.createElement('div')
view = view || <button>確定</button>
ReactDOM.render(view, div)
document.body.appendChild(div)
}
}
// 方法和css樣式寫入全局文件，需要用到的地方 utils.alert() 調用即可
2、react組件。由上述方法生成的react節(jié)點是不繼承state和props屬性的，若想在之后做節(jié)點狀態(tài)修改，渲染刷新，就需要將方法放進react組件里，通過生命周期控制。
import ReactDOM from 'react-dom'
import React, { Component } from 'react';
class PopupMask extends Component {
constructor(props) {
super(props)
}
retContainer () {
if (!this.popupNode) {
const popupNode = document.createElement('div')
popupNode.setAttribute('id', 'popup_mask')
this.popupNode = popupNode
document.body.appendChild(popupNode)
}
return this.popupNode
}
retContent () {
return (
<div className="popup_content">
{this.props.children}
</div>
)
}
componentDidUpdate () {
//當父級模塊更新時，直接粗暴地執(zhí)行渲染，該api跨節(jié)點渲染，理同ReactDOM.render
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
this.retContent(),
this.retContainer(),
)
}
render() {
return null //此處需返回null 避免報錯
}
}
export default PopupMask
// 這樣會就可以愉快地使用了
// import PopupMask from 'components/PopupMask/PopupMask.jsx';
// 引入的組件放哪里都可以，當前模塊執(zhí)行render方法時會重新渲染
{/* <PopupMask className="">
<div>真香警告</div>
</PopupMask> */}
此操作困擾我一時，總覺得就這樣暴力執(zhí)行render真的好？翻閱無數資料無果，后托大佬扣出ant的popup組件，發(fā)現ant里面也是這么寫的，頓時就放心了。
