React组件自适应窗口宽高

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‘)
);