欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React组件自适应窗口宽高

程序员文章站 2024-01-11 22:49:46
很多时候我们需要组件能够根据窗口变化改变宽高: 比如说,当我们引用一个ant Table组件,并且动态传入columns及dataSource时,由于需要控制sroll值我们需要获得动态的width和height; 再比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口 ......

很多时候我们需要组件能够根据窗口变化改变宽高:

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

再比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化,width我们可以用css{width:100%},但是height就需要我们动态获取;

......

下面举例一个如何自己封装一个table组件,它可以根据columns变化scroll-x,根据视口的大小改变height及scroll-y

class mytable extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 1000,
    }
    this.myref=react.createref();
  }

  componentwillmount() {
    this.widthreset(this.props)
  }

  componentdidmount() {
    this.handleresize();
    window.addeventlistener('resize', this.handleresize);
  }

  componentwillunmount() {
    window.removeeventlistener('resize', this.handleresize);
  }

  handleresize() {
    const divheight = this.myref.current.clientheight;
    divheight!=null && this.setstate({height:divheight})
  }

   componentwillreceiveprops(props){
      this.widthreset(props)  
   }
  
   widthreset=(props)=>{
     let width=0;
     props.columns.foreach((record)=>{
        width+=record.width;
     });
   this.setstate({width}) } render() { return ( <div classname="table-div"> {`${this.state.width} x ${this.state.height}`} <div classname="table" style={ { width: this.state.width, height: this.state.height } }></div> </div> ); } } reactdom.render( <mytable columns={columns}/>, document.getelementbyid('root') );

以下为相关解释:

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

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

react生命周期