ReactJS - एक तत्व की ऊंचाई प्राप्त करें

Question

प्रतिक्रिया के बाद मैं तत्व की ऊंचाई कैसे प्राप्त कर सकता हूं उस तत्व को प्रस्तुत करता है?

एचटीएमएल

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

परिणाम

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

यह conta की गणना है प्रस्तुत करने से पहले अंदरूनी ऊंचाई (36 पीएक्स)। मैं रेंडर के बाद ऊंचाई प्राप्त करना चाहता हूं। इस मामले में सही परिणाम 18px होना चाहिए।

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

Answer 1

देखें this बेला (वास्तव में अपने का अद्यतन)

आप componentDidMount जिसके बाद विधि प्रस्तुत करना चलाया जाता है में हुक करने की जरूरत है। वहां, आपको तत्व की वास्तविक ऊंचाई मिलती है।

Answer 2

आप document.getElementById का उपयोग करने के बजाय तत्व पर रेफरी का उपयोग करना चाहेंगे, यह थोड़ी अधिक मजबूत चीज है।

Answer 3

ref का उपयोग कर एक अद्यतित ES6 उदाहरण है।

याद रखें कि हमें React class component का उपयोग करना है क्योंकि हमें लाइफसाइक्ल विधि componentDidMount() तक पहुंचने की आवश्यकता है क्योंकि हम केवल डीओएम में प्रस्तुत किए जाने के बाद तत्व की ऊंचाई निर्धारित कर सकते हैं।

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

आप यहाँ चल उदाहरण मिल सकते हैं: https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe