【react踩坑】设置div宽度自适应

场景： 使用antd组件tabs左右滑动时，有些边上的标签会只显示一半，影响页面效果。现在需要每页只显示5个tab标签，每个tab标签宽度自适应。

实现思路： 监听包裹tabs的div组件的宽度变化，动态设置每个tabs的宽度为当前外部div宽度的1/5。
方法一：

const element = document.getElementsByClassName("ant-tabs-nav-scroll")[0];
    const elementWidth =
      (element &&
        (element.style.width ||
          element.clientWidth ||
          element.offsetWidth ||
          element.scrollWidth)) ||
      0;
    const itemWidth = elementWidth / 5 - 64 + 8;

方法二：
给想监听的div注册一个引用，在componentDidMount时绑定onsize事件，在componentWillUnmount时解绑事件。

	componentDidMount(){
        window.addEventListener('resize', this.changeWidth);
        this.resizeListener();
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.changeWidth);
    }
    
    changeWidth= () => {
    	const {clientWidth, clientHeight} = this.refDom;
    	//...
    }

	<div ref={ref => (this.redDom = ref)} className={styles.container}>
      //...             
    </div>