Question

我有4列，其高度都没有固定，我需要找到这些列的高度，以便最大列的高度可以设置为其他三列。如何使用React并且不使用'minHeight'css？

我是React的新手，我在这里找到的最接近的问题是ReactJS get rendered component height。

我还发现了this链接，说明这可以通过获取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

在React中获取Component的高度

1 个答案: