如何根据窗口大小设置 const 值（真或假）？

Question

在我的学习中，我遇到了这个问题：

在下面这段代码中，我需要根据屏幕大小设置useState(false)。

如果大于 947px，例如，它会自动更改为 true。

因为如果我将其更改为“false”，我的 navlist(item:nth-child(3)) 不会显示在正常的屏幕宽度上，但它可以在小屏幕上正常工作。如果我将其更改为“true”，我的导航列表在普通屏幕上正常工作，但如果我更改为小屏幕，我的导航列表开始打开，这真的很烦我......

如果有任何类似的方法，请告诉我。

import Image from "next/image";
import styles from "../styles/Navbar.module.css";
import React, { useState } from 'react';



const Navbar = () => {

    const [openMenu, setOpenMenu] = useState(false);

    
    return (
        <div className={styles.container}>
            <div className={styles.item} onClick={() => setOpenMenu(!openMenu)}>
                <div className={styles.line} style={{ transform: openMenu ? "rotate(-765deg) translate(-8px, 8px)" : "rotate(0) translateX(0)" }}></div>
                <div className={styles.line} style={{ opacity: openMenu ? "0" : "1" }}></div>
                <div className={styles.line} style={{ transform: openMenu ? "rotate(-855deg) translate(5px, 7px)" : "rotate(0) translateX(0)" }}></div>
            </div>
            <div className={styles.item}>
                
                <div className={styles.call}>
                    <Image src="/img/telephone.png" alt="Telephone" width="32px" height="32px" />
                </div>
                <div className={styles.call}>
                    <div className={styles.text}>ORDER NOW!</div>
                    <div className={styles.text}>012 345 6789</div>
                </div>
            </div>
            <div className={styles.item}>
                <ul className={styles.list} style={{ transform: openMenu ? " translateX(0)" : "translateX(-100%)" }}>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Homepage</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Products</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Menu</a></li>
                    <li className={styles.listItem}><a href="#">
                        <Image src="/img/logo.png" alt="Logo" width="160px" height="69px" /></a>
                    </li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Events</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Blog</a></li>
                    <li className={styles.listItem} style={{
                        transform: openMenu ? " translateX(0)" : "translateX(-100%)",
                        opacity: openMenu ? "1" : "0"
                    }}><a href="#">Contact</a></li>
                </ul>
            </div>
            <div className={styles.item}>
                <div className={styles.cart}>
                    <Image src="/img/cart.png" alt="Logo" width="30px" height="30px" />
                    <div className={styles.counter}>2</div>
                </div>
            </div>
        </div>
    )
}

export default Navbar

Answer 1

这是一个钩子函数，您可以在其中检测屏幕宽度，这也将处理屏幕大小调整：

function getWindowDimensions(): { windowWidth: number; windowHeight: number } {
    if (typeof window === 'undefined') {
        const windowWidth = 0;
        const windowHeight = 0;
        return { windowWidth, windowHeight };
    }

    const { innerWidth: windowWidth, innerHeight: windowHeight } = window;

    return {
        windowWidth,
        windowHeight,
    };
}

function UseWindowDimensions(): {
    windowWidth: number;
    windowHeight: number;
} {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

    useEffect(() => {
        function handleResize(): void {
            setWindowDimensions(getWindowDimensions());
        }

        window.addEventListener('resize', handleResize);

        return (): void => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
}

用法如下：

const { windowWidth } = UseWindowDimensions();

然后，您可以在观察 'windowWidth' 值的 useEffect 中控制您的状态布尔值。

 useEffect(()=> {
    windowWidth > 947 ? setOpenMenu(true) : setOpenMenu(false)
 },[windowWidth])