Javascript 如何获取HTML元素'；根据它的内容，它的高度是多少？

我有一个react应用程序，它有一个包含div的组件，可以生成长文本。我有一个“Show description”按钮来展开这个长文本div。因此，在开始时，我将div高度设置为0px，当我单击Show description按钮时，div需要通过一些动画完全展开。 问题是，即使我将初始高度设置为0px，我也不确定如何根据内容设置展开高度。以下是我尝试的

descriptionExpanded = (expanded) => {
    this.setState({ descriptionExpanded: expanded })
}

<div style={{ height: descriptionExpanded ? `60px` : '0px', transition: descriptionExpanded ? 'height 0.25s ease-in' : 'height 0.15s ease-out' }}>
    Long text...
</div>
<div onClick={() => this.descriptionExpanded(!descriptionExpanded)}>
    <span>{descriptionExpanded ? 'Hide Description' : 'Show Description'}</span>
</div>

descriptionExpanded=（扩展）=>{
this.setState（{descriptionExpanded:expanded}）
}
长文本。。。
this.descriptionExpanded（！descriptionExpanded）}>
{descriptionExpanded？'Hide Description'：'Show Description'}

我需要将此“60px”设置为一个可变值，该值是整个文本中div的实际高度。当我尝试使用

“auto”

代替

“60px”

和

“100%”：“0%”代替像素时，显示/隐藏开关不工作。当我尝试使用
“100%”：“0px”
时，开关可以工作，但没有动画。我认为动画只适用于像素

如何才能正常工作？
获取元件高度和重量的一种方法如下：

 var clientHeight = document.getElementById('element_id').clientHeight;
 var clientWidth = document.getElementById('element_id').clientWidth;

值得一读