react正常无法在父组件dom节点之外的其他节点创建组件,查文档发现react提供了Portals方法来实现:
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
文档地址:传送门
示例代码:
import React from 'react'
import ReactDOM from 'react-dom'
export default class Layer extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
this.el.setAttribute('class', 'layer');
}
componentDidMount() {
document.body.appendChild(this.el);
}
componentWillUnmount() {
document.body.removeChild(this.el);
}
render() {
return ReactDOM.createPortal((
<div className="content">
layer
</div>
), this.el);
}
}