Как узнать высоту React компонента из другого компонента?

Question

[Олег]

Сабж. Есть два компонента, которые находятся в совершенно разных местах. Мне нужно внутри одного компонента получить значение высоты другого компонента. Как это сделать?

Сейчас я пишу пользовательский хук, в который при вызове передавался бы селектор ID, и он бы возвращал высоту компонента с этим ID. Но столкнулся с проблемой, что в кастомных компонентах атрибут id рассматривается как prop, соответственно он не отображается в DOM.

Comments

[harabudjasim]

id надо передать на стандартный компонент при отрисовке, потомучто кастомные компоненты на дом не проецируются. Реакт использует виртуальный дом, поэтому о высоте реального компонента в доме ничего не знает, как по мне то получить высоту можно только через document.getElementById(....), но я не уверен до конца.

Answer 1

[Антон Спирин]

Сейчас я пишу пользовательский хук, в который при вызове передавался бы селектор ID,

Для подобной операции не нужен хук. По-хорошему вы должны получать ref целевого элемента, а не искать его в DOM с помощью селектора.

Мне нужно внутри одного компонента получить значение высоты другого компонента. Как это сделать?

Писать значение в store или state общего родителя.

Но столкнулся с проблемой, что в кастомных компонентах атрибут id рассматривается как prop

Потому, что id следует пробрасывать в базовые компоненты, но для решения вашей задачи это не нужно.

Comments

[Олег]

Добрый день. Мне нужно, чтобы это было расширяемо. Чтобы внутри любого компонента я мог взять высоту любого компонента. Поэтому и появилась идея выделить этот повторяющийся код в отдельный хук.

Вообще у меня сейчас задача такая. Мне нужно внутри одного компонента получить высоту 3-х других компонентов. Не хотелось бы один и тот же код писать 3 раза. При этом эти 4 компонента разбросаны по приложению в разных местах.

[Антон Спирин]

Олег, для обращения к document не нужен хук, хватит функции. Но тут будет правильней работать с ref.
Если вы собираетесь в хуке дублировать состояние - высоту элементов, то получите несколько источников правды.
Правильней будет создать action или callback и писать данные о состоянии в один источник правды store или state общего родителя.