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>的高度，忽略 {{ 1}}表达式，它本身调用以呈现另一个{backgroundImg}组件。

<Row>

这个问题的原因可能是<Row> <FullRowImage src={this.props.src} alt={this.props.alt} /> <h2> <span> Some Text </span> </h2> </Row>只计算clientHeight的一部分而忽略了另一部分？

感谢。

Answer 1

所以我终于想通了。由于<FullRowImage />呈现<img>本身，clientHeight会在<img>加载之前被调用，这将导致<img>的高度为零，以及{ {1}}。

在这种情况下，方法<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} /> ); } }的高度。

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

＆＃39; clientHeight＆＃39;不计算所有元素 - React

1 个答案: