React组件自适应窗口宽高

很多时候我们需要组件能够根据窗口变化改变宽高，有时候可以使用css,有时候需要随数据调整则使用js计算。

比如说，当我们在页面中放置一个iframe时，我们希望它的宽高随着其父元素or窗口的变化而变化；

再比如说，当我们引用一个ant Table组件，并且动态传入columns及dataSource时，由于需要控制sroll值我们需要获得动态的width和height；

......

下面我们举几个栗子

 例1：使用antd layout布局，如下图，content宽高会随着窗口变化，我们希望iframe-component组件也随之变化，以至于iframe高度超出时iframe显示滚动条，该怎么写呢？

我们知道layout是flex布局，所以即使我们用下面的css也不能实现需求，因为content没有宽高，他的子元素使用height:100%起不到作用。

.iframe-component{
  width:100%;
  height:100%;  
}

.iframe{
  width:100%;
  height:calc(100% - 30px);  
}

怎么办呢？我们可以使用vh单位给iframe-component设置宽高。这样i