react根据浏览器的尺寸动态调整布局

react根据浏览器的尺寸动态调整div

react实现关键代码

// 设置状态
state = {
    deskDivWidth：800px;
    deskHeight: document.body.clientHeight,
}


componentDidMount() {

// 注册浏览器尺寸变化监听事件， 刷新桌面尺寸
window.addEventListener('resize', this.handleSize);

}

componentWillUnmount() {
    // 移除监听事件
    window.removeEventListener('resize', this.handleSize);
}

// 自适应浏览器的高度
handleSize = () => {
    this.setState({
        deskHeight:document.body.clientHeight,
    });
}


render() {

    const { deskDivWidth,deskHeight } = this.state;
        return (
            <Fragment>
                <div className={styles.deskDiv}
                     style={{width: deskDivWidth, height: deskHeight, backgroundColor:'#41b887' }}>
                     
                     这个div高度可以自适应哦--刘云生

                </div>


            </Fragment>
        );
    }