ReactJS - Uzyskaj wysokość elementu

Question

Jak mogę uzyskać wysokość elementu po tym, jak React renderuje ten element?

HTML

<div id="container"> 
<!-- This element's contents will be replaced with your component. --> 
<p> 
jnknwqkjnkj<br> 
jhiwhiw (this is 36px height) 
</p> 
</div> 

ReactJS

var DivSize = React.createClass({ 

    render: function() { 
    let elHeight = document.getElementById('container').clientHeight 
    return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>; 
    } 
}); 

ReactDOM.render(
    <DivSize />, 
    document.getElementById('container') 
); 

WYNIK

Size: 36px but it should be 18px after the render 

To obliczenie Conta wysokość bezwzględna przed renderowaniem (36 pikseli). Chcę uzyskać wysokość po renderowaniu. Właściwy wynik powinien w tym przypadku wynosić 18 pikseli.

https://jsfiddle.net/69z2wepo/29800/

Answer 1

Zobacz this skrzypce (właściwie zaktualizowane'S)

Trzeba podpiąć pod componentDidMount który jest uruchamiany po czyni metodę. Tam otrzymujesz faktyczną wysokość elementu.

Answer 2

Chciałbyś również użyć refs na elemencie zamiast używać document.getElementById, to tylko trochę bardziej solidna rzecz.

Answer 3

Poniżej przedstawiono aktualny przykład ES6 z użyciem ref.

Pamiętaj, że musimy użyć React class component, ponieważ musimy uzyskać dostęp do metody cyklu życia componentDidMount(), ponieważ możemy określić wysokość elementu po renderowaniu w DOM.

import React, {Component} from 'react' 
import {render} from 'react-dom' 

class DivSize extends Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     height: 0 
    } 
    } 

    componentDidMount() { 
    const height = this.divElement.clientHeight; 
    this.setState({ height }); 
    } 

    render() { 
    return (
     <div 
     className="test" 
     ref={ (divElement) => this.divElement = divElement} 
     > 
     Size: <b>{this.state.height}px</b> but it should be 18px after the render 
     </div> 
    ) 
    } 
} 

render(<DivSize />, document.querySelector('#container')) 

można znaleźć uruchomiony przykład tutaj: https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe