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生命周期

巴特西

React组件自适应窗口宽高

最新文章

热门文章