Get the height of a Component in React

Question

I have 4 columns, none of whose height is fixed, and I need to find the height of these columns so that the height of the largest column can be set to the other three. How can I do this with React and not using the 'minHeight' css?

I am a newbie in React and the closest question I found here was ReactJS get rendered component height.

Also I found this link which says that this could be done by getting the DOMNode and using the Refs, but I'm with no success.

Answer 1

You can just use the ref callback and access the DOMNode inside it.

class Example extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            height: null
        };
        this.columns = ['hello', 
                        'this is a bit more text', 
                        'this is a bit more text ... and even more'];
    }

    render(){
        return <div ref={(node) => this.calcHeight(node)}>
                 {
                    this.columns.map((column) => {
                        return <div style={{height: this.state.height}}>{column}</div>
                    })
                 }
               </div>;
    }
    calcHeight(node) {
        if (node && !this.state.height) {
                this.setState({
                    height: node.offsetHeight
                });
        }
    }
}

React.render(<Example />, document.getElementById('container'));

Working example on jsfiddle: http://jsfiddle.net/vxub45kx/4/

Also look here: https://facebook.github.io/react/docs/more-about-refs.html