这是 state ：
const [open, setOpen] = useState(false);
state 由图标上的 onclick 事件控制，如下所示：
onclick=()=>{setOpen(!open)}
当 state setOpen(false) 在较大的窗口中时，我想设置它。现在我如何在我的代码上实现它？
回答1
尝试这个 ：
import React, { useLayoutEffect, useState } from 'react';
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}回答2
您可以通过使用媒体查询来做到这一点。通过使用媒体查询，而不是侦听任何调整大小事件，您可以只查看某些断点（lg、md、sm 等）。
多合一外部库：
MUI 中的 https://mui.com/material-ui/react-use-media-query/ 易于使用且可靠。下面是一个观察 600px 屏幕尺寸的简单示例。
import * as React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery'
export default function SimpleMediaQuery()
{
const matches = useMediaQuery('(min-width:600px)')
return <span>{`(min-width:600px) matches: ${matches}`}</span>
}想改用预设断点吗？
const matches = useMediaQuery(theme.breakpoints.up('sm'))打回来？
const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'))可以通过多种方式自定义此挂钩（有关更多示例，请参见上面链接的文档）。
没有外部库的自定义钩子：
如果你想在不依赖外部库的情况下做到这一点，这里有一个简单的钩子，用于监视某些断点，类似于 MUI 的 useMediaQuery。
export const useMediaQuery = (width) =>
{
const [targetReached, setTargetReached] = useState(false)
const updateTarget = useCallback((e) =>
{
if (e.matches) setTargetReached(true)
else setTargetReached(false)
}, [])
useEffect(() =>
{
const media = window.matchMedia(`(max-width: ${width}px)`)
media.addEventListener('change', updateTarget)
// Check on mount (callback is not called until a change occurs)
if (media.matches) setTargetReached(true)
return () => media.removeEventListener('change', updateTarget)
}, [])
return targetReached
}用法：
// 600px
const matches = useMediaQuery(600)