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设置宽高。这样iframe-component的高度就永远等于窗口的高度减去header的高度了

.iframe-component{
  width:100%;
  height:calc(100vh - 64px);  
}

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

解释:

单位vh :1vh等于视口高度的1%

 

例2:antd Table组件的scroll属性用来设置横向或纵向滚动,也可用于指定滚动区域的宽高,可以设置为像素值,百分比,true和‘max-content’。

现在需要实现一个Table,希望它布满整个父div,父div随窗口变化大小;当父div高度小于Table总高度时Table显示纵滚动条;父div宽度小于Table总宽度时Table显示横滚动条,另外他的列是动态生成,即列数及宽度不定

import {Table} from 'antd';
class MyTable extends React.Component { constructor(props) { super(props); this.state = { width: 0, height: 1000, } this.myRef=React.createRef(); }    componentWillMount() { this.widthReset(this.props.columns) } componentDidMount() { this.handleResize(); window.addEventListener('resize', this.handleResize); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); }   
 //取父div的height handleResize() { const divHeight = this.myRef.current.clientHeight; divHeight!=null && this.setState({height:divHeight}) }
   componentWillReceiveProps(props){ this.widthReset(props.columns) } widthReset=(columns)=>{ let width=0; columns.forEach((record)=>{ width+=record.width; });
   this.setState({width}) } render() { return ( <div className="table-div" > <Table
       columns={this.props.columns}
       dataSource={this.props.dataSource}
       style={{height:this.state.height}}
       scroll={ { x: this.state.width, y: (this.state.height-this.columnHeight) } }
     /> </div> ); } } ReactDOM.render( <MyTable columns={columns} dataSource={dataSource}/>, document.getElementById('root') );

相关解释:

React的ref :可以将ref绑定到 render() 输出的任何组件上,来获取相应的支撑实例。

Element.clientHeight :这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

React生命周期

 

posted @ 2019-06-19 17:29  杰瑞鼠小D  阅读(12113)  评论(0编辑  收藏  举报