获取渲染组件高度

获取渲染组件高度

本文介绍了ReactJS 获取渲染组件高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm attempting to integrate or create a React version of https://github.com/kumailht/gridforms, to do so I need to normalize the height of the columns inside of the row. The original takes the height of the grid row and applies it to the children columns.

我曾计划获取行的高度,然后将其映射到孩子的属性,但从我的尝试来看,我认为这可能不是理想的方式,甚至可能不是?

I had planned to get the height of the row and then map it to a property of the child, though from my attempts I'm thinking this might not be the ideal way or even possible?

以下是我当前的代码.

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>)
  }
})

我测试了以这种方式设置样式,它会起作用,但是无法获取高度.

I tested setting the style this way and it will work, however getting the height isn't.

小提琴:

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

推荐答案

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

A bit late with the answer but technically you can get element hight this way:

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

这篇关于ReactJS 获取渲染组件高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 06:30
查看更多