Comment démonter tous les composants de niveau Root dans ReactJs

Question

Existe-t-il un moyen d'obtenir tous les éléments Root dans React ?

J'ai une situation où les éléments sont créés à la racine via ReactDOM.render, mais ils ne sont pas démontés lorsque mon composant est démonté.

Je voudrais récupérer tous les éléments, autres que AppContainer, puis les démonter lorsque mon composant est monté, est-ce possible ?

Answer 1

Les composants racine rendus avec ReactDOM ne sont pas conscients les uns des autres.

pour démonter un composant qui n'est pas dans l'arbre d'un composant à démonter, vous pourriez faire quelque chose de ce genre :

const App1Component = <div>app1</div>;
const app1 = document.getElementById("app1")
ReactDOM.render(<App1Component/>, app1);

export class AppContainer extends React.Component {
  componentWillUnmount() {
    // ummount other components not in this tree
    if (app1) 
      ReactDOM.unmountComponentAtNode(app1);
  }
}

En gros, à chaque fois que votre composant "principal" démonte, appelez ReactDOM.unmountComponentAtNode avec vos autres nœuds DOM des éléments Root.