4

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.

Community
  • 1
  • 1
Kshitij Bajracharya
  • 811
  • 2
  • 14
  • 37

1 Answers1

4

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

Richard Rutsche
  • 1,156
  • 8
  • 11
  • Thanks @Richard Rutsche. The columns I mentioned were actually custom Components and I could not completely implement what you suggested, but it did give me helpful pointers. For now I just used the clientHeight from the DOMNode and had to use forceUpdate to make it work, although [this](https://facebook.github.io/react/docs/component-api.html#forceupdate) link says it's not a good idea to use forceUpdate. I guess I have a lot to learn before I understand all the titbits about React. – Kshitij Bajracharya Mar 12 '16 at 04:59
  • @Kshitij Yeah that's right, `forceUpdate` is not a good solution in most cases. Where do you fetch the clientHeight and use `forceUpdate`? Inside your columns? Maybe you could get it in `componentDidMount` of the parent component and pass it as prop to the columns. – Richard Rutsche Mar 14 '16 at 15:33
  • 2
    this code seems to have a big issue: it's triggering a set state inside a render cycle – Avram Tudor Jan 19 '18 at 15:47
  • @PotecaruTudor No, it just works like a `componentDidMount`. Ref functions get triggered after `render` with the node as parameter. And as you can see it is only triggered once if `this.state.height` is not set. – Richard Rutsche Mar 06 '18 at 15:37