React - 如何使用媒体查询更改 state

Question

I want to know how can I change the state of a class using media queries? For example, the initial state of my state is false, how can I change to true when the screen is higher than 900px

Answer 1

You can add an event listener to a useEffect hook update your state accordingly. For example:

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>
  );
}