ReactJS - Ottieni altezza di un elemento

Question

Come posso ottenere l'altezza di un elemento dopo che React esegue il rendering di quell'elemento?

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

RISULTATO

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

E 'il calcolo della conta altezza prima del rendering (36px). Voglio ottenere l'altezza dopo il rendering. Il risultato giusto dovrebbe essere 18px in questo caso.

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

Answer 1

Vedi this violino (in realtà aggiornato il vostro portfolio)

È necessario collegare in componentDidMount che viene eseguito dopo che il metodo di rendering. Lì, ottieni altezza reale dell'elemento.

Answer 2

Si dovrebbe anche usare i riferimenti sull'elemento invece di usare document.getElementById, è solo una cosa leggermente più robusta.

Answer 3

Di seguito è un esempio ES6 aggiornato utilizzando ref.

Ricorda che dobbiamo usare un React class component poiché dobbiamo accedere al metodo Ciclo di vita componentDidMount() perché possiamo determinare l'altezza di un elemento solo dopo che è stato reso nel 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')) 

è possibile trovare l'esempio correre qui: https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe