本文介绍了如何使React组件根据窗口或数据变化自适应宽高。通过示例展示了如何处理iframe组件和antd Table组件的自适应布局。对于iframe，利用vh单位实现高度自适应；对于antd Table，结合ref和clientHeight动态计算滚动区域的宽高，以实现全屏显示和滚动条的智能展示。
很多时候我们需要组件能够根据窗口变化改变宽高，有时候可以使用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设置宽高。这样iframe-
最低0.47元/天 解锁文章
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
