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

呈现的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>的一部分，而忽略了另一部分？
谢谢。

最佳答案

所以我终于明白了。
当<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

关于html - 'clientHeight'不计算所有元素-React，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41433999/