我正在尝试集成或创建一个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>)
  }
})

我测试了这种方式设置风格,它会起作用,但是高度不是.

编辑:小提琴:

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

我正在尝试获取无状态子组件的高度,以便我能够在父类中使用它的高度,但是我收到以下错误: Invariant Violation: Stateless function components cannot have refs.

简化代码

家长班

class App extends React.Component {
  componentDidMount() {
    console.log(this.header);
  }
  render() {
    return (
      <Child ref={component => this.header = component} />
    )
  }
}

儿童

const Child = () => (
  <header ref="header">
    Some text  
  </header>
)

有没有办法做到这一点？

这是一个带错误的Codepen链接.

更新:

实际代码/上下文

所以我目前有一个Header组件,看起来像这样:

export const Header = ({dateDetailsButton, title, logo, backButton, signUpButton, inboxButton, header}) => (
    <header header className="flex flex-row tc pa3 bb b--light-gray relative min-h-35 max-h-35">
      {signUpButton ? …