React+Redux+styled-components环境下根据屏幕宽度控制组件可见性并触发指定方法

我有一个带筛选功能的Wrapper组件，调用openMobileFilters()方法时组件展示，调用closeMobileFilters()方法时组件隐藏。该组件为全屏展示，我需要在屏幕宽度大于993px时自动执行closeMobileFilters()方法。

openMobileFilters()和closeMobileFilters()会修改控制组件展示状态的对应state。

我的初始代码如下：

const Wrapper = styled.div`
  @media only screen and (min-width: 993px) {
    // 我可以在这里添加closeMobileFilters()方法的调用逻辑吗？
  }
`;

const mapDispatchToProps = (dispatch) => ({
  closeMobileFilters: () => dispatch(closeMobileFiltersAction()),
});

export default connect(null, mapDispatchToProps)(MobileFilters);

我使用的技术栈为React、Redux和styled-components。我知道可以在媒体查询中直接添加display: none;实现隐藏，但我需要触发执行这个方法来更新对应的状态。

已验证的解决方法 #

我引入了useResizeObserver实现该需求，完整实现代码如下：

1. 封装监听元素尺寸的自定义hook

import useResizeObserver from "@react-hook/resize-observer";

const useSize = (target) => {
  const [size, setSize] = useState();

  useLayoutEffect(() => {
    setSize(target.current.getBoundingClientRect());
  }, [target]);

  useResizeObserver(target, (entry) => setSize(entry.contentRect));
  return size;
};

2. 在组件中绑定元素引用并调用方法

const target = useRef(null);
const size = useSize(target);

// 元素宽度为0时触发关闭方法
if (size?.width === 0) {
  closeMobileFilters();
}

return <Wrapper ref={target}>{/* 组件内容 */}</Wrapper>

内容的提问来源于stack exchange，提问作者some nooby questions