使用 API 将文本渲染到 div 时，offsetHeight 返回 0

Question

我有一个 div，它呈现从 API 调用中获取的一些文本。 如果超过 3 行，我想添加一个See more按钮。 以下是我的实现。

         seeMore(){
            this.setState({
            seeMore: !this.state.seeMore
          })
         }

内部渲染方法

        function countLines() {
            var el = document.getElementById("about");
            var divHeight = el && el.offsetHeight;
            var lines = divHeight / 24;
            return lines;
        }

//24以上是我的行高。

内部返回

 <div>
       <div id="about" style={{WebkitLineClamp:seeMore ? '':3}}>
          {expert.bio}
       </div>
       {expert.bio !== undefined && (countLines() >= 3 && 
       <span onClick={this.seeMore.bind(this)}>{seeMore === true ? 'See less': 'See more'}</span>)}
 </div>

在上述解决方案中，即使 div 中有内容，我的offsetHeight始终返回0 。 我已设置条件仅在内容可用时运行countLines function。 但我仍然得到offsetHeight的0值。

我已经用硬编码值尝试了这个解决方案，然后它就可以工作了。 它仅在渲染取自 API 的文本时才起作用。

Answer 1

function countLines() {
        var el = document.getElementById("about").clientHeight;
        var lines = el / 24;
        return lines;
    }

你已经试过了，它会起作用的。