React-监听div宽度的变化

Question

我正在尝试设置一个监听器来确定应用程序中特定div的宽度。如果div的宽度小于800px，我想将样式设置为display:none。我可以按原样执行，但它不会监听它，只有在刷新页面时才会删除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

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

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