reactjs - 在 React 中获取组件的高度

Question

我有 4 列，它们的高度都不是固定的，我需要找到这些列的高度，以便可以将最大列的高度设置为其他三个。如何使用 React 而不使用“minHeight”css 来做到这一点？

我是 React 的新手，我在这里发现的最接近的问题是ReactJS get rendering component height。

我还发现这个链接说这可以通过获取 DOMNode 并使用 Refs 来完成，但我没有成功。

Answer 1

您可以只使用ref回调并访问其中的 DOMNode。

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

关于 jsfiddle 的工作示例：http: //jsfiddle.net/vxub45kx/4/

也看这里：https ://facebook.github.io/react/docs/more-about-refs.html