обмен данными между отключенными компонентами

Question

Я не создаю приложение реакции с нуля, а добавляю интерактивные компоненты на существующую веб-страницу. Я монтирую два компонента, отсоединенных друг от друга, вот так:

ReactDOM.render(<Component1 />, document.getElementById('comp1-root'));

ReactDOM.render(<Component2 />, document.getElementById('comp2-root'));

Они l ie далеко друг от друга на странице.

Как мне их связать говорится друг с другом?

Спасибо.

Answer 1

Реактивные порталы - это то, что я искал.

В соответствии с моим вопросом, я хотел иметь одинаковый контекст для всех компонентов, смонтированных в разных местах (узлах 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.

Answer 2

У вас есть две опции с React:

1. Переместите Component 1 и Component 2 и их состояние в родительский компонент и передайте им функцию состояния обновления родителя:

ComponentWrapper {
...
const updateState = () => {
    //update state
}

return (
    <Component 1 updateParentState={updateState}/>
    <Component 2 updateParentState={updateState}/>
)
...
}

Вы не можете обновить состояние компонента, который не является родительским или дочерним, без использования внешнего решения управления состоянием, такого как Redux или новый useContext api / hook. Эти библиотеки включают перемещение всех состояний отдельных компонентов в более крупное централизованное глобальное состояние, которое может быть обновлено и доступно всем компонентам.