Question

我一直困扰着这个烦人的问题，其中，我只是试图制作一个包含汉堡包和类似内容的导航栏，但是当我单击某个按钮时，组件不会重新渲染或更新应该会更改组件的状态，并导致汉堡包按钮和菜单打开，反之亦然。

import React, {useState} from "react";
import styles from "./Navigation.module.css";
import pin from "./pin.png";
import "./NavFunctions";



function Navigation(props)   {

    let [country, setCountry] = useState("UK");
    let [city, setCity] = useState("London");
    let [response, setResponse] = useState({});
    let [MenuHamburgerToggled, setMenuHamburgerToggled] = useState(false);

        const style = {
            nav: {
                position: "absolute",
                top: "0",
                left: "0",
                width: "100vw",
                height: "150px",
                backgroundColor: "transparent"
            },

            nav_container: {
                flexDirection: "row",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                margin: "40px 100px",
                color: "white",
            },
            cnc: {
                fontFamily: '"Agency FB", serif',
                fontSize: '30pt',
            },
            hamburgerMenuToggle: {
                width: "30px",
                height: "30px",

            }
        }
        return (
            <React.Fragment>
                <Menu isOpen={MenuHamburgerToggled}/>
                <nav style={style.nav}>
                    <div style={style.nav_container}>
                        <div style={style.cnc}>
                            {country}, {city} <img style={{
                            width: "30px", height: "30px", marginLeft: "10px"
                        }} src={pin} alt="pin"/>
                        </div>
                        <div style={style.hamburgerMenuToggle}>
                            <MenuHamburger toggled={MenuHamburgerToggled} onClick={()=> setMenuHamburgerToggled(!MenuHamburgerToggled)}

                            />
                        </div>
                    </div>
                </nav>
            </React.Fragment>
        )
}

function MenuHamburger(props) {

    let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);

    const handleClick = () => {
         setToggled(!toggled);
    }

    const styles = {
        toggleHamburger: {
            zIndex: "1001",
            cursor: "pointer",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggleHamburger__ic: {
            display: "inline-block",
            cursor: "pointer",
        },
        tg__hr: {
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_bir: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_iki: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            opacity: toggled ? "0" : "1",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_och: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },

    }

        return (
            <div style={styles.toggleHamburger}
            >
                <button style={styles.tg__hr} >
                    <div style={styles.toggleHamburger__ic}>
                        <div style={styles.toggle_bir}></div>
                        <div style={styles.toggle_iki}></div>
                        <div style={styles.toggle_och}></div>
                    </div>
                </button>
            </div>
        )


}

 function Menu(props)  {
    let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);

     let styles = {
         Menu_container: {
             width: "100vw",
                 height: isOpen === true ? "100vh" : "0",
                 backgroundColor: "#211113",
                 transition: "all ease 1s"
         }
     }

        return (
            <div style={styles.Menu_container}>

            </div>
        )

}

export default Navigation;

Answer 1

您的MenuHamburger不是html元素组件，因此如果您不手动调用onClick，它将无法正常工作。

您可以做的是将onClick传递到div渲染方法中的MenuHamburger中。这样可以确保当用户单击div时，它将在onClick父级上调用<MenuHamburger onCLick={...}。

function MenuHamburger(props) {
    ...
    return (
        <div style={styles.toggleHamburger} onClick={props.onClick}>
    ...
}

Answer 2

最后，我设法通过添加useEffect来解决此问题：

function MenuHamburger(props) {

    let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);

    const handleClick = () => {
         setToggled(!toggled);
    }

    useEffect( () => {
        setToggled(props.toggled);
    }, [props.toggled]);

    const styles = {
        toggleHamburger: {
            zIndex: "1001",
            cursor: "pointer",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggleHamburger__ic: {
            display: "inline-block",
            cursor: "pointer",
        },
        tg__hr: {
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_bir: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_iki: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            opacity: toggled ? "0" : "1",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_och: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },

    }

        return (
            <div style={styles.toggleHamburger}
                 onClick={props.onClick}
            >
                <button style={styles.tg__hr} >
                    <div style={styles.toggleHamburger__ic}>
                        <div style={styles.toggle_bir}></div>
                        <div style={styles.toggle_iki}></div>
                        <div style={styles.toggle_och}></div>
                    </div>
                </button>
            </div>
        )


}

 function Menu(props)  {
    let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);

     useEffect( () => {
         setIsOpen(props.isOpen);
     }, [props.isOpen]);

     let styles = {
         Menu_container: {
             width: "100vw",
                 height: isOpen === true ? "100vh" : "0",
                 backgroundColor: "#211113",
                 transition: "all ease 1s"
         }
     }

        return (
            <div style={styles.Menu_container}>

            </div>
        )

}

因此，现在组件会随着状态变化而更新，动画也可以正常工作。感谢您的指导。

组件不会在状态更改时重新呈现

2 个答案: