Как вычислить высоту блока перед рендерингом в react?

Question

[Alexander]

Зравствуйте, нужно получить высоту аккордиона перед самим рендерингом, я использую билиотеку styled-components и react-transition-group. Проблема в первоначальной анимации, ибо для нее нужна высота блока.
Буду благодарен за помощь
Link

Comments

[Константин Б.]

Как можно получить то чего нет?

[WbICHA]

scrollHeight

[Alexander]

Константин Б., тогда может есть какие-то другие способы решить задачу, без использования max-height: 1000px и вычисления высоты?

Answer 1

[antares4045]

ну jquery с bootstrap как то справляются (они именно вхардкоживают высоту контента, ещё ни разу не отрендерив), но там какая-то чёрная магия.

Автору могу предложить сделать overflow: hidden контейнер, в который вложен контент: при этом контент будет рендериться, но видно его не будет.
Плюс навесьте обработчик на изменение размера окна: открываешь аккордион на какой-то одной ширине окна, затем делаешь поуже и ваш код делает вот так:

UPD: чтобы отвлечься от затыка в работе проверил, достаточно ли того подхода, что я описал: работает

Если вам влом клонить и билдить также закинул билд на pages

Хотя некоторая задержка, после которой начинается увеличение высоты контента при сужении страницы меня смущает. но мне, честно говоря влом искать причину.