理论依据: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;