Есть ли не костыльный способ передавать состояния между компонентами React?

Недавно работаю с React, и очень сильно смущает одна вещь - то, как здесь предлагается передавать данные между компонентами. Сама идея компонентов мне видится в том, чтобы сделать приложение модульным, состоящим из независимых блоков, что очень удобно как по мне. Однако иногда требуется передавать данные между компонентами. Например: есть кнопка, есть меню. При нажатии на кнопку меню должно открыться. Насколько я понял, есть два пути реализации этой несложной затеи: использовать контекст, либо же просто прокидывать state через пропсы. И оба мне кажутся очень кривыми, поскольку приходится изменять родительские компоненты. Это препятствует гибкости и модульности структуры приложения. Для обеспечения взаимодействия двух компонентов, приходится изменять еще и третий. Таким образом, компоненты становятся привязаны друг к другу и к структуре страницы. И если я захочу изменить эту структуру, мне придется вносить правки в кучу компонентов. А ведь таких взаимодействующих компонентов может быть множество, не создавать же кучу контекстов для каждого случая. Есть ли более красивый и изящный способ сделать это? Можно ли при нажатии на кнопку просто найти в дереве компонент меню и изменить его состояние, не задействуя родительских компонентов-посредников?


Ответы (1 шт):

Автор решения: Themms

Как вариант, вы можете использовать React portal для того, чтобы вынести модальное окно за пределы <div id="app"></div>, и вызывать его через document.querySelector().

→ Ссылка