Question

我有一个组件网格，每行3个。

它们是代表产品的div，具有价格和描述等内在组成部分。这些产品有时会有更长的标题，这会推动其他组件向下发展。

这很好，但是当它发生时，我希望同一行中其他组件的标题高度相同，以便下一个组件（价格，评级）垂直对齐。所以连续每个产品的价格都是一样的。

然后，我想让行的高度为行中三个元素的最大高度。

有没有一种好方法可以动态操纵元素的高度，这可以用于反应？

Answer 1

我会在渲染子组件后调用的所有子组件中注入一个函数。

示例：

var Product = React.createClass({

  componentDidMount: function() {
    var height = 200; // calculate height of rendered component here!
    // set height only one time
    if (this.props.findHeight) {
        this.props.setHeight(height);
    }
  },

  render: function() {
    return <div style={{height:this.props.height,backgroundColor:'green'}}>
            Product
        </div>;
  }
});

var Main = React.createClass({
  getInitialState: function() {
    return {
      maxHeight:0,
      findHeight: true
    }
  },

  componentDidMount: function() {
    this.setState({
        maxHeight: this.state.maxHeight,
        findHeight: false
    });
  },

  setMaxHeight: function(maxHeight) {
    if (maxHeight > this.state.maxHeight) {
      this.setState({maxHeight: maxHeight})
    }
  },

  render: function() {
    return (<div>
             <Product setHeight={this.setMaxHeight} height={this.state.maxHeight} findHeight={this.state.findHeight} />
           </div>);
  }
});

如何计算组件实际高度的逻辑是一个不同的问题。你可以解决它，例如用jQuery（How to get height of <div> in px dimension）。不幸的是我不能回答关于vanilla js的问题，但是当你问google时我肯定你能找到答案非常快： - ）

问候

Answer 2

通过扩展CapCa提供的答案，您可以通过Element.getBoundingClientRect()获得组件的实际高度。

let domRect = element.getBoundingClientRect();

您还可以使用React Ref来定位目标反应成分的顶部元素。您的代码可能是这样的，

let domRect = this.TargetedElementRef.getBoundingClientRect(),
    elementHeight = domRect.height,
    elementWidth = domRect.width;   // you can get the width also

如何在使用react时动态调整元素大小？

2 个答案: