組件不會在狀態變化時重新渲染反應

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傳遞到MenuHamburger渲染方法中的div 。 這將確保當用戶單擊 div 時，它將調用<MenuHamburger onCLick={...}父級上的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>
        )

}

所以，現在組件隨着狀態的變化而更新，動畫也能正常工作。 感謝您的指導。