Ответ
В React есть несколько способов общения между компонентами:
- Props - передача данных от родителя к ребенку
<ChildComponent data={parentData} />- Callback-функции - передача функций в props для общения ребенка с родителем
<ChildComponent onUpdate={handleUpdate} />- Context API - глобальное состояние для вложенных компонентов
const ThemeContext = createContext();
<ThemeContext.Provider value="dark">
<ChildComponent />
</ThemeContext.Provider>-
Сторы (Redux, MobX, Zustand) - управление состоянием приложения
-
События (Event Emitter) - кастомные события через
window.dispatchEvent -
Refs и методы - доступ к методам дочернего компонента через ref
const childRef = useRef();
childRef.current.someMethod();Выбор зависит от сложности приложения и отношений между компонентами. Для простых случаев хватает props и callbacks, для сложных - Context или сторы.
Ответ 18+ 🔞
А, ну это ж классика, блядь! Общение между компонентами в Реакте — это как в большой коммуналке, сука. Все друг другу что-то передают, кричат через стенку, а кто-то вообще по глобальному радио вещает. Ёпта, сейчас разложу по полочкам, как здоровый человек.
Смотри, вариантов дохуя, но не все они для одного и того же.
Первый, самый простой — это пропсы (props). Как пацан передаёт записку через всю парту. Родительский компонент — это ты, а дочерний — твой кореш на другом конце класса. Кидаешь ему данные и всё.
<ChildComponent data={parentData} />Всё, прилетело. Но если кореш хочет тебе что-то ответить, одними пропсами не обойдёшься, блядь.
Второй — колбэки (callback functions). Это когда ты вместе с запиской кидаешь ему же и конверт с обратным адресом. То есть функцию. Он там что-то сделает, напишет ответ в эту функцию, и она тебе вернётся. Умно, сука.
<ChildComponent onUpdate={handleUpdate} />Он вызовет onUpdate, а твоя handleUpdate в родителе сработает. Всё, связь налажена, можно и пивка взять.
Но что, если компонентов дохуя и они все вложенные, как матрёшки, блядь? Таскать пропсы через десять промежуточных «дядь» — это же пиздец, руки отвалятся. Нафиг надо.
Третий — Context API. Это типа общая доска объявлений в подъезде. Объявил контекст, обернул всех нужных соседей в Provider, и теперь любой вложенный компонент, даже самый глубокий, может подписаться и читать, что там написано. Или даже свою херню приколоть.
const ThemeContext = createContext();
<ThemeContext.Provider value="dark">
<ChildComponent />
</ThemeContext.Provider>Теперь внучатый племянник ChildComponent может спокойно достать этот value. Красота, ёпта.
Четвёртый — Сторы (Redux, MobX, Zustand). А это уже не доска, а целая центральная диспетчерская, ядрёна вошь! Всё состояние приложения лежит в одном месте, отдельно от компонентов. Кто хочет что-то узнать или изменить — идёт в стор, блядь. Мощно, но для маленькой избушки тащить атомную электростанцию — овердохуища.
Пятый — События (Event Emitter). Старая добрая дичь, как в ванильном JS. Компонент может крикнуть в никуда: window.dispatchEvent(new CustomEvent('myEvent')). А другой компонент, где бы он ни был, если слушает это событие — услышит. Глобально, но не очень по-реактовски, честно говоря. Как молотком гвозди забивать — работает, но есть и шуруповёрт.
Шестой — Refs и методы. Вот это уже хитрый приём, блядь. Это когда ты говоришь: «Эй, сынок, дай-ка я напрямую порулю твоими внутренностями». Создаёшь ref, цепляешь его на дочерний компонент, и потом можешь вызывать его методы напрямую, как свои.
const childRef = useRef();
childRef.current.someMethod();Жёстко, не по-семейному, но в некоторых ситуациях — единственный выход, когда уже всё ебнулось.
Короче, выбор, блядь, зависит от того, насколько у тебя всё запущено.
Два компонента рядом — пропсы/колбэки.
Куча вложенных, но не сильно разбросанных — Context.
Большое, сложное приложение, где всё со всем связано — стор.
Остальное — уже на крайняк, когда другие варианты хуй с горы.
Вот и вся философия, в рот меня чих-пых. Главное — не выебывайся и не используй стор для того, чтобы передать isOpen в соседний Popup.