监听当前窗口的分辨率

理论依据：https://blog.csdn.net/weixin_42833042/article/details/106924543

import React, { useEffect, useState } from 'react';
//引用之前先安装，详情链接里有
import ResizeObserver from 'resize-observer-polyfill';

const teamWarning = (props) => {
//设置当前窗口的分辨率大小的变量
  const [screenWidth, setScreenWidth] = useState(null);
// 定义userRef，相当于this,里面只有一个属性current
  const rootRef = useRef();
//保存当前窗口大小的函数
  const handleWidthChange = () => {
//取current里的clientWidth获取宽
    const widths = rootRef.current.clientWidth;
    setScreenWidth(widths);
  };
  useEffect(() => {
//监听，并调用返回
    const ob = new ResizeObserver(handleWidthChange);
    ob.observe(rootRef.current);
    return () => { ob.unobserve(rootRef.current); };
  }, []);

  return ( //绑定当前div所在的分辨率
    <div ref={rootRef } >
      <div>cccc</div>
    </div>
  );
};

teamWarning.propTypes = {
  rootRef: PropTypes.number.isRequired,
};
teamWarning.defaultProps = {
  dateTime: null,
};
export default teamWarning;