如何從嵌套組件呼叫React中的“useSate(false)”？

如何從嵌套組件呼叫 React 中的“useSate(false)”？單擊側邊欄專案之一時，我想關閉側邊欄。為此，我需要從父組件呼叫 onclick 函式 setOpen(true)。

function SearchDropdown() {

    const [open, setOpen] = useState(false);

    return (
    <>
        <div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
        {open && <>
            <div className="searchBarDropdown"><SearchBar></SearchBar></div>
            <div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
        </>}
    </>
    );
}

function MenuSidebar() {

    const [open, setOpen] = useState(false);

    return (
    <>
        <div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
        {open && <>
            <div className="menuSidebar">
                <h3 className="backwardsSection" onClick={() => setOpen(false)}>?? Go Back</h3>
                <MenuSidebarItems />
                <h3 className="sidebarTopics">Topics</h3>
                <TopicItems />
            </div>
            <div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
        </>}
    </>
    );
}

function MenuSidebarItems() {
    return (
        <>
        <MenuSidebarItem leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
        <MenuSidebarItem leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
        <MenuSidebarItem leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
        <MenuSidebarItem leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
        <MenuSidebarItem leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
        </>
    );
}

function MenuSidebarItem(props) {
    const navigate = useNavigate();
    return (
        <button className="menuItem" onClick={() => {
            navigate("/"   props.children.toString().toLowerCase());
        }}>
            <span className="leftIcon">{props.leftIcon}</span>
            {props.children}
            <span className="rightIcon">{props.rightIcon}</span>
        </button>
    );
}

謝謝，馬丁

uj5u.com熱心網友回復：

您需要將關閉導航欄的 setState 作為道具傳遞給顯示選單的組件。

    function SearchDropdown() {
    
        const [open, setOpen] = useState(false);
    
        return (
        <>
            <div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
            {open && <>
                <div className="searchBarDropdown"><SearchBar></SearchBar></div>
                <div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
            </>}
        </>
        );
    }
    
    function MenuSidebar() {
    
        const [open, setOpen] = useState(false);
    
        return (
        <>
            <div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
            {open && <>
                <div className="menuSidebar">
                    <h3 className="backwardsSection" onClick={() => setOpen(false)}>?? Go Back</h3>
                    <MenuSidebarItems setOpen={setOpen}/>
                    <h3 className="sidebarTopics">Topics</h3>
                    <TopicItems />
                </div>
                <div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
            </>}
        </>
        );
    }
    
    function MenuSidebarItems(props) {
const {setOpen} = props
        return (
            <>
            <MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
            <MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
            <MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
            <MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
            <MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
            </>
        );
    }
    
    function MenuSidebarItem(props) {
        const navigate = useNavigate();
const {setOpen}  = props
        return (
            <button className="menuItem" onClick={() => {
               setOpen={flase}
                navigate("/"   props.children.toString().toLowerCase());
            }}>
                <span className="leftIcon">{props.leftIcon}</span>
                {props.children}
                <span className="rightIcon">{props.rightIcon}</span>
            </button>
        );
    }

標籤：javascript 反应 使用状态

上一篇：僅在錯誤處理和Fetch完成后才呈現值

下一篇：將鍵/值對添加到陣列陣列中的物件？