Использование querySelector() в ReactJs неправильно?

Question

[Игорь Шумиловский]

Допустим, есть кнопка, по клику на который откроется попап. Как добраться до попапа в реакте, если он лежит за три девять земель от кнопки и совсем в другой ветке компонентов?

Refs? Js selectors?

Answer 1

[Сергей Соколов]

Чуть шире опишите, что вы хотите сделать. Как открывается popup – у него просто свойство "открыт"/"закрыт", или метод, который надо вызвать? По-хорошему, сверху вниз спускается через `props` состояние этого popup'а.

Чтобы не строить длинные лестницы props'ов, посмотрите Context в React.

Если нужен querySelector() – т.е. получить сам DOM-элемент – то есть ReactDOM.findDOMNode().

Comments

[Игорь Шумиловский]

по сути, да, просто поменять стейт одного параметра. Просто лесенка может получиться довольно длинной, если в пропсах передавать. Нету в реакте что-то наподобии refs, только с глобальным поиском, например?

[Сергей Соколов]

Игорь Шумиловский: посмотрите на Context в React – он как раз, чтобы не выстраивать длинные лестницы. Для более сложных взаимодействий, чем одна кнопка-попап, всякие Flux'ы, но я предпочёл Baobab с baobab-react.

[Игорь Шумиловский]

Сергей Соколов: Контекст имеет только одно направление? От родителя к детям или из детей можно изменить родительский контекст?

[Сергей Соколов]

Игорь Шумиловский: только сверху вниз. Но можно же передать и метод родителя по обновлению данных через контекст вниз, и вызывать его в дочерних узлах.

[Игорь Шумиловский]

Сергей Соколов: Спасибо