Получение размера элемента при первом рендере

Question

Есть блок с текстом <p className={'comment'}>{comment.text}</p> и для него есть стили:

.comment
  overflow: hidden
  height: 34px
  font-size: 12px
  line-height: 1.5

  &:after
    position: absolute
    display: block
    width: 100%
    height: 30px
    background: linear-gradient(to top, #fff, transparent)
    content: ''

Если размер блока с текстом больше 34px (вешается псевдокласс :after), то нужно нужно отображать кнопку для раскрытия всего комментария.

P.s. считать кол-во символов не вариант, т.к. в тексте могут быть эмоджи или любые другие спецсимволы

Answer 1

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

Mожно еще <div ref={setup} и где функция setup получит элемент (div) на входе, возьмет размер и сделает setState.

Но, возможно, изображение заметно дернется. Идеально не сделать. Можно с начальным visibility поиграть.

БЛОГ НА HUSL

Получение размера элемента при первом рендере

Ответы (1 шт):