「clientHeight」不計一切元素 - 陣營

作出的DOM樹是「clientHeight」不計一切元素 - 陣營

<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;

然而，看起來這個電話只會給出包含在<section>中<Row>的高度，忽略{backgroundImg}表達式，它本身被調用來渲染另一個<Row>組件。

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

什麼可能是這個問題的原因，雖然離開了clientHeight計數只有<section>的一部分，其他的？

謝謝。

來源

2017-01-02 GettingBetter

所以我終於明白了這一點。由於<FullRowImage />本身呈現<img>，在加載<img>之前調用clientHeight，這將導致<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

來源

2017-01-03 11:01:14 GettingBetter

「clientHeight」不計一切元素 - 陣營

回答

相關問題