Реактивные порталы - это то, что я искал.
В соответствии с моим вопросом, я хотел иметь одинаковый контекст для всех компонентов, смонтированных в разных местах (узлах dom).
Порталы решили именно эту проблему. Теперь у меня может быть один компонент контекста, содержащий все компоненты, существующие на этой странице. Например:
const dashboardContextDom = document.getElementById('dashboard-root');
const comp1DOM = document.getElementById('comp1-root');
const comp2DOM = document.getElementById('comp2-root');
const Dashboard = () => {
return (
<>
{ReactDOM.createPortal(<Component1 />, comp1DOM)}
{ReactDOM.createPortal(<Component2 />, comp2DOM)}
</>
);
}
if(dashboardContextDom) {
ReactDOM.render(<Dashboard />, dashboardContextDom);
}
С этими компонентами, размещенными в одном контексте, можно легко передавать состояние от одного компонента к другому через prop drilling
и lifting state up
.