html - 'clientHeight' 不计算所有元素 - React

Question

渲染的 DOM 树是

<Grid fluid ={true}>

      <Row>
          <NavigationBar 
           buttonClass='nav-button' 
           className='nav-bar'  
           />
      </Row>

      <section id={sectionList[0]}>
        <Row className='logo-row'>
          <Col className='logo-wrap' xs={3} sm={3} md={2}>
            {Logo}
          </Col>
          <Col xs={9} sm={9} md={10}>
            {ProgrammerName}
          </Col>
        </Row>
        {backgroundImg}
      </section>

 </Grid>

我试图检查 <section> 的 clientHeight通过使用以下方法:

      const height = document.getElementById(sectionList[0]).clientHeight;

但是，这个调用似乎只会给出 <Row> 的高度包含在 <section> , 忽略 {backgroundImg}表达式，它本身调用以呈现另一个 <Row>组件。

 <Row>
    <FullRowImage src={this.props.src} alt={this.props.alt} />
      <h2>
        <span>
          Some Text
        </span>
      </h2>
  </Row>

这个问题的原因可能是clientHeight只计算 <section> 的一部分而忽略另一个？

谢谢。

Answer 1

所以我终于弄明白了。作为<FullRowImage />呈现一个 <img>本身，clientHeight在 <img> 之前调用已加载，这将导致 <img> 的零高度以及<FullRowImage> .

在这种情况下，方法 componentDidMount()还不够，因为安装的组件不能保证加载图像。另一方面，onLoad事件将派上用场:

class FullRowImage extends React.Component {
   constructor(props){
   super(props);
   this.state = {
     loaded: false,
   };
   this.handleLoaded = this.handleLoaded.bind(this);
 }

handleLoaded(){
   console.log(document.getElementById('test').offsetHeight);
   this.setState(
   {loaded: true,}
   );
 }

 render(){
  return(
    <img id='test'  
     onLoad={this.handleLoaded} 
     src={this.props.src} 
     alt= {this.props.alt} />
    );
  }
}

这将打印 <img> 的高度加载后。

感谢这篇文章 Detect when images have finished loading with React