在react应用程序中，我们总是有一个根组件，而其他所有组件都是该组件的子组件。
因此，每当我要显示模态时，我决定打破这种惯例，创建一个新元素或新组件，并将其直接附加到document.body。
作为body的子代，我们将不再有堆叠z索引问题，因此此模态将始终100%显示。或者至少这是我的想法。
所以我做了一个叫做modal.js的新组件
在这个模态中，我不想在它的子级上返回一个带有一些花哨css样式的div，我只想返回一个无脚本标记，这意味着不要渲染这样的东西：
import React, { Component } from 'react';
import ReactDOM from ‘react-dom’;
class Modal extends Component {
render() {
return <noscript />;
}
}
export default Modal;
所以当我显示模态组件时，它不会在屏幕上显示任何内容。那么我该如何在屏幕上显示这个模态呢？
好吧，我决定做一个变通办法，添加一个类似的componentDidMount()：
import React, { Component } from 'react';
import ReactDOM from ‘react-don’;
class Modal extends Component {
componentDidMount() {
}
render() {
return <noscript />;
}
}
export default Modal;
因此，每当这个组件被挂载或呈现到屏幕上时，我都会在内存中创建一个新的div，并将其分配给this.modalTarget，如下所示：
从"React"导入React，｛Component｝；从"react don"导入ReactDOM；
class Modal extends Component {
componentDidMount() {
this.modalTarget = document.createElement(‘<div>’);
}
render() {
return <noscript />;
}
}
export default Modal;
这是完成的文件：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Modal extends Component {
componentDidMount() {
this.modalTarget = document.createElement('<div>');
this.modalTarget.className = 'modal';
document.body.appendChild(this.modalTarget);
this._render();
}
componentWillUpdate() {
this._render();
}
componentWillUnmount() {
ReactDOM.unmountComponentAtNode(this.modalTarget);
document.body.removeChild(this.modalTarget);
}
_render() {
ReactDOM.render(<div>{this.props.children}</div>, this.modalTarget);
}
render() {
return <noscript />;
}
}
export default Modal;
我本以为这会奏效，也许会出现Inviolant错误，但肯定不会：
未捕获的DOMException：未能在上执行"createElement"文档"：
('<div>')提供的标记名称无效。
我不确定这里发生了什么。
Bravo的一条评论帮助我解决了这个问题。帮助我的是重构这个：
this.modalTarget = document.createElement('<div>');
到此：
this.modalTarget = document.createElement('div');
为什么不使用React.Fragment？
你可以做这样的事。。。
const Modal = () => (
<React.Fragment>
<noscript />
</React.Fragment>
);
export default Modal;