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

總結

以上是生活随笔為你收集整理的react根据浏览器的尺寸动态调整布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。