reactjs - 使父组件中的两个子组件具有相同的高度

Question

我有一个呈现两个子组件的组件，考虑到以下情况，我希望两个组件处于相同的高度 1. 当屏幕处于正常尺寸时 2. 当我调整屏幕大小时什么是最好的策略实现这个？

Answer 1

我会使用一些 JQuery 来实现这一点。检查最高的 child 并将该值应用于另一个 child 。

 $(document).ready(function () {
        $(window).resize(function () {
            $(".child1").height("auto");
            $(".child2").height("auto");
            var height = Math.max($(".child1").outerHeight(), $(".child2").outerHeight());
            $(".child1").height(height);
            $(".child2").height(height);
        }).resize();
    });

.child1 {background-color:red; float:left; width:50%;}
.child2 {background-color:blue; float:left; width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div>
  <div class="child1">
  </div>
  <div class="child2">
    <br /><br /><br /><br /><br /><br /><br />
  </div>
</div>