组件化对前端来讲已是家常便饭，各种功能效果实现之后，冷不防产品又想让在另一个模块调用。简单，Ctrl + c + v一通操作，几十遍几十上百行代码不嫌烦的话完全OK的哈~。像我这么懒的人肯定是要利用组件一劳永逸哇。我们平时写的组件一般是在当前页面的某个元素节点下面使用，要是碰上一些蒙层或是需要置于顶层覆盖的组件，避免元素的隐藏属性则需要将组件放置于页面外层。保存运行，哎哟卧槽怎么还有个节点盖在上面，找出css加上z-index这才安心。在使用antui的时候会发现alert，popup的弹出层都是插入在body节点下面的，这就可以很舒服地决解避免被其他元素隐藏和层级问题，维护性较高。
这个牛皮啊怎么搞得，妈我学。这就需要用到ReactDOM.render，简单实现一下：
1、工具类的方法
![BP$)SMOL_47E]ECIN_5F}XQ.png](https://img.haomeiwen.com/i6272721/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节点是不继承state和props属性的，若想在之后做节点状态修改，渲染刷新，就需要将方法放进react组件里，通过生命周期控制。
1530330856(1).jpg
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 () {
//当父级模块更新时，直接粗暴地执行渲染，该api跨节点渲染，理同ReactDOM.render
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
this.retContent(),
this.retContainer(),
)
}
render() {
return null //此处需返回null 避免报错
}
}
export default PopupMask
// 这样会就可以愉快地使用了
// import PopupMask from 'components/PopupMask/PopupMask.jsx';
// 引入的组件放哪里都可以，当前模块执行render方法时会重新渲染
{/* <PopupMask className="">
<div>真香警告</div>
</PopupMask> */}
此操作困扰我一时，总觉得就这样暴力执行render真的好？翻阅无数资料无果，后托大佬扣出ant的popup组件，发现ant里面也是这么写的，顿时就放心了。
网友评论