react使用fix固定定位彈窗時位置發生偏移解決方案

問題描述：

如圖，底部是固定操作按鈕，居中對齊，點擊“發佈日曆”時會出現確認彈窗，但是發現了問題，按鈕會集體往右邊移動一小段。

檢查後發現原因：是底部操作欄的寬度是頁面寬度，不包括滾動條，彈窗時出現遮罩，滾動條消失頁面寬度會出現小幅增加，所以按鈕會發生右移。

原樣式：

//js文件
<div className={styles.fixBotBarWrap}>
     <Button>預覽</Button>
     <Button type="primary">發佈日曆</Button>
     <Button>保存</Button> 
     <Button>關閉</Button>
</div>

//樣式文件
.fixBotBarWrap{
  position: fixed;
  width:100%;
  bottom: 0;
  left:0;
  z-index:999;
  background: #F2F2F2;
  border-top:1px solid #E1E6E3;
  height: 55px;
  line-height: 55px;
  text-align: center;
  :global(.ant-btn){
    margin-top: 10px;
  }
}

修改方案：1、使用state記錄寬度，底部div使用狀態值而不是直接獲取寬度 2、窗體寬度改變時改變state值

//js文件
<div className={styles.fixBotBarWrap} style={{width:this.state.winWidth}}>
     <Button>預覽</Button>
     <Button type="primary">發佈日曆</Button>
     <Button>保存</Button> 
     <Button>關閉</Button>
</div>


componentDidMount(){
        window.addEventListener('resize', this.autoWidth)
}
componentWillUnmount() {
        window.removeEventListener('resize', this.autoWidth)
}
//獲取瀏覽器寬度
autoWidth = () =>{
        var winWidth=0;
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (document.documentElement && document.documentElement.clientWidth)
            winWidth = document.documentElement.clientWidth;
        this.setState({
            winWidth:winWidth,
        })
}



//less文件
.fixBotBarWrap{
  position: fixed;
  bottom: 0;
  left:0;
  z-index:999;
  background: #F2F2F2;
  border-top:1px solid #E1E6E3;
  height: 55px;
  line-height: 55px;
  text-align: center;
  :global(.ant-btn){
    margin-top: 10px;
  }
}