React-监听div宽度的变化

Question

我正在尝试设置一个侦听器以确定我的应用程序中特定div的宽度。如果div宽度小于800px，我想将样式设置为显示：无。我可以按原样进行操作，但是它不会听，只会在刷新页面时删除div。

const [style, setStyle] = useState({});
const documentRef = useRef(null);

useEffect(() => {
  if (documentRef.current.offsetWidth < 800) {
    const updatedStyle = {
      display: 'none',
    }
    setStyle(updatedStyle);
  }
}, [documentRef.current]);

Answer 1

当像素低于800像素时，您可以使用CSS媒体查询来隐藏某些内容。

@media only screen and (max-width: 800px) {
  show-lg-only {
    display: none;
  }
}