React在body下追加全局组件并实现渲染更新

组件化对前端来讲已是家常便饭，各种功能效果实现之后，冷不防产品又想让在另一个模块调用。简单，Ctrl + c + v一通操作，几十遍几十上百行代码不嫌烦的话完全OK的哈~。像我这么懒的人肯定是要利用组件一劳永逸哇。我们平时写的组件一般是在当前页面的某个元素节点下面使用，要是碰上一些蒙层或是需要置于顶层覆盖的组件，避免元素的隐藏属性则需要将组件放置于页面外层。保存运行，哎哟卧槽怎么还有个节点盖在上面，找出css加上z-index这才安心。在使用antui的时候会发现alert，popup的弹出层都是插入在body节点下面的，这就可以很舒服地决解避免被其他元素隐藏和层级问题，维护性较高。

这个牛皮啊怎么搞得，妈我学。这就需要用到ReactDOM.render，简单实现一下：

1、工具类的方法

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组件里，通过生命周期控制。

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里面也是这么写的，顿时就放心了。