Да, нужно использовать порталы. Имеет смысл создать специальный компонент для этого.
Portal.jsx:
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Portal extends Component {
componentWillUnmount() {
document.body.removeChild(this.defaultNode);
}
render()
{
if(!this.defaultNode) {
this.defaultNode = document.createElement('div');
document.body.appendChild(this.defaultNode);
}
return ReactDOM.createPortal(this.props.children,this.defaultNode)
}
}
export default Portal;
Потом используем в любом компоненте:
import Portal from "./Portal";
//...
class App extends Component {
render()
{
return (
<div>
<Portal>
<div style={{zIndex:10000}}>Этот див буде добавлен перед закрытием body</div>
</Portal>
</div>
);
}
}
export default App;