ReactDOM.craetePortal
Virtual DOM外のDOMをコンポーネントのライフサイクルで管理できる機能
app-rootの外にportalを置くDOMがあって
code:html
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</html>
こういうコンポーネントをVirtual DOMの中に置く
mount/unmountのタイミングでmodal-rootの中のDOMを付け外しできる
code:js
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}