Как обратиться из одного React компонента к DOM другого компонента?

Question

[GreaterGlider]

Добрый день!

Имеется два компонента - условно один рисует карту, а другой точки на ней. Приложение написано так, что ни один не является потомком другого.

Сейчас компонент рисующий точки делает это через document.getElementById("Id-карты") и абсолютным позиционированием ставит их. Мне подобная реализация не нравится, хочется сделать по уму.

Вопросы - как можно грамотно реализовать это средствами реакта? Надо ли подключать Redux?

Answer 1

[Сергей Сунцев]

Как удобней для проекта так и делаете, если межкомпонентных связей не много, то можно и одним реактом ограничится, в таком случае объедините их родительским компонентом и там держите общее состояние в state.

Можно подключить redux и прокидывать данные через store, это бдет удобно если в других компонентах вы захотите получить эти данные.

Comments

[GreaterGlider]

Примерно к этим же мыслям пришел, но подумал, что могу что-то не знать из основ реакта. К слову, почему в реакте именно такой способ передачи стейта и пропсов, т.е. от родителя к потомкам? Почему нельзя было сделать как в классическом ООП, в духе componentInstance.setState({new state});?

[Сергей Сунцев]

GreaterGlider, Я предполагаю потому, что современная разработка SPA на реакте все же предполагает функциональное программирование, а не ООП.

"в духе componentInstance.setState({new state});"
Для такие вещей как раз и подойдет Redux. Организуете, через действия(actions) сохранение состояния в глобальный store а от него уже (лучше через селекторы - библиотека reselect) отправляете данные в компоненты.

Можно также посмотреть в сторону mobx там все на декораторах, если любите с ними работать, то можно попробовать, для маленьких придложений мне кажется mobx даже больше подходит.
Но на больших приложениях с большой вложенностью компонентов, все же лучше redux/