Как сделать плавную анимацию высоты React?

Question

[alaskafx]

Хочу сделать так: у меня есть переменная актуальной высоты элемента, которая меняется в зависимости от её контента.
Я пытаюсь сделать:

const panel = document.querySelector('.panel')
    const style = {
        height: `${panel.clientHeight}px`
    }
// и навесить на элемент:
<div className="panel" style={style}>
                <Outlet/>
            </div>

Но в консоли высвечивается такая ошибка: Cannot read properties of null (reading 'clientHeight')
Как решить?

Comments

[Александр]

const [clientHeight, setClientHeight] = useState(null);

const style = {
    height: clientHeight ? `${clientHeight}px` : 'auto'
};

return (
    <div style={style} ref={(ref) => setClientHeight(ref?.clientHeight ?? null)}>
        {children}
    </div>
);

[alaskafx]

Александр, Не могли бы вы ещё подсказать.. Как сделать так, чтобы эта высота на элементе переходила плавно?
Сейчас это выглядит как-то резко

[Dosya]

alaskafx, используй метод scrollTo

[Александр]

alaskafx, https://developer.mozilla.org/ru/docs/Web/CSS/tran...

[alaskafx]

Александр, спасибо, посчитал нужным создать второй вопрос: https://qna.habr.com/q/1154698

Answer 1

[Антон Романков]

Используйте useRef вместо querySelector.
Пример тут: https://codesandbox.io/s/beautiful-shape-8dm1ti?fi...