ReactJS - Nhận chiều cao của một phần tử

Question

Làm thế nào tôi có thể nhận được Chiều cao của một phần tử sau khi React hiển thị phần tử đó?

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

KẾT QUẢ

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

Nó tính conta chiều cao iner trước khi render (36px). Tôi muốn có được chiều cao sau khi render. Kết quả đúng phải là 18px trong trường hợp này.

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

Answer 1

Xem this fiddle (trên thực tế cập nhật của bạn)

Bạn cần phải móc vào componentDidMount được điều hành sau khi làm phương pháp. Ở đó, bạn nhận được chiều cao thực tế của phần tử.

Answer 2

Bạn cũng sẽ muốn sử dụng các tham chiếu trên phần tử thay vì sử dụng document.getElementById, đó chỉ là một điều mạnh mẽ hơn một chút.

Answer 3

Sau đây là ví dụ ES6 cập nhật sử dụng ref.

Hãy nhớ rằng chúng tôi phải sử dụng React class component vì chúng tôi cần truy cập vào vòng đời componentDidMount() vì chúng tôi chỉ có thể xác định chiều cao của phần tử sau khi được hiển thị trong 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')) 

Bạn có thể tìm thấy những ví dụ chạy ở đây: https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe