问题描述
我正在尝试集成或创建一个 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 获取渲染组件高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!