ReactJS 获取渲染组件高度

Question

我正在尝试集成或创建 https://github.com/kumailht/gridforms 的 React 版本，为此，我需要标准化行内列的高度。原始数据采用网格行的高度并将其应用于子列。

我计划获取行的高度，然后将其映射到子项的属性，尽管从我的尝试来看，我认为这可能不是理想的方式，甚至可能不是？

下面是我当前的代码。

GridRow = React.createClass({
  render(){
        const children = _.map(this.props.children, child => {
            child.props.height = // somehow get row component height
            return child
        })
    return (<div data-row-span={this.props.span} {...this.props}>
      {children}
    </div>)
  }
})

GridCol = React.createClass({
  render(){
    return (<div data-field-span={this.props.span} style={{height:this.props.height}} {...this.props}>
      {this.props.children}
    </div>)
  }
})

我测试了以这种方式设置样式，它会起作用，但是获取高度却不行。

编辑: fiddle :

https://jsfiddle.net/4wm5bffn/2/

Answer 1

答案有点晚了，但从技术上讲，你可以通过这种方式获得元素高度:

var node = ReactDOM.findDOMNode(this.refs[ref-name]);
if (node){
  var calculatedHeight = node.clientHeight;
}