Javascript 反应-如何使用媒体查询更改状态

我想知道如何使用媒体查询更改类的状态？例如，我的状态的初始状态为false，当屏幕高于900px时，我如何更改为true？您可以将事件侦听器添加到

useffect

hook，从而更新您的状态。例如：

import * as React from "react";

export default function App() {
  const [isGreaterThan900px, setIsGreaterThan900px] = React.useState(false);

  React.useEffect(() => {
    function handleResize() {
      if (window.innerWidth > 900) {
        setIsGreaterThan900px(true);
      } else {
        setIsGreaterThan900px(false);
      }
    }

    handleResize();

    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="App">
      <h1>is greater than 900 px: {isGreaterThan900px ? "true" : "false"}</h1>
    </div>
  );
}

import*as React from“React”；
导出默认函数App（）{
常数[Isgreetherthan900px，SetIsgreetherthan900px]=React.useState（false）；
React.useffect（（）=>{
函数handleResize（）{
如果（window.innerWidth>900）{
设置大于900px（真）；
}否则{
设置大于900px（假）；
}
}
handleResize（）；
addEventListener（“调整大小”，handleResize）；
return（）=>window.removeEventListener（“resize”，handleResize）；
}, []);
返回(
大于900 px:{大于900 px？“真”：“假”}
);
}

这里有一个类似的问题。是一篇关于创建UseWindowsSize挂钩的文章，该挂钩将屏幕宽度/高度设置为状态。您可以修改它或在另一个自定义钩子中使用此UseWindowsSize来执行您尝试执行的操作。请向我展示一个使用类组件的示例