当屏幕尺寸太大时，调度到redux

Question

我遇到了一个令人困惑的问题，当标题的屏幕大小变大时，我想更新它的一部分状态。我目前正在使用顺风，所以我有以下代码：

在移动视图中，如果模板未隐藏，并且屏幕大小变大，则应使用handleHideTemplates自动更新状态。。。

这就是我要做的。我知道这个把手会立即启动，我不想。。。

在移动视图中，如果用户点击showTemplates，它会立即隐藏模板。

const handleHideTemplates = () => {
dispatch(setShowTemplates({ hidden: 'hidden' }));
dispatch(setTemplateMargin({ margin: '' }));
};
console.log('hidden', hidden);
return (
<header
className={`text-gray-500 text-semibold text-s fill-accent1 
top-0 z-30 sticky  lg:grid ${
'grid' ? handleHideTemplates() : null
} bg-templateBg px-8 ${margin}`}
>

Answer 1

想明白了。。。而不是类内部的条件。。

useEffect(() => {
const handleResize = () => {
if (window.innerWidth >= 1024) {
handleHideTemplates();
}
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);