reactjs - 侧边栏菜单由它自己呈现

Question

即使我具有通过单击比萨图标实现的功能，侧边栏也会自动呈现

Main.js 组件，在该组件中实现了用于切换侧边栏的 useState Hook 功能

import React, { useState } from 'react';  
import { Navbar } from '../NavBar/Navbar';  
import { SideBar } from '../SideBar/sidebar';  
import { MainContainer,MainContent,MainItem,MainH1,MainP1,MainButton } from './MainElements';

export const Main = () => {

    const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

    return (
        <MainContainer>
            <Navbar toggle={toggle}/>
            <SideBar isOpen={isOpen} toggle={toggle} />
            <MainContent>
                <MainItem>
                    <MainH1>
                        Greatest Pizza Ever
                    </MainH1>
                    <MainP1>
                        Ready as early in the 5 Minutes
                    </MainP1>
                    <MainButton>Submit</MainButton>
                </MainItem>
            </MainContent>
        </MainContainer>
        
    )
}

Sidebar.js 组件自动呈现在屏幕上

import { SidebarContainer,Icon,CloseIcon,SidebarMenu,SidebarLink,SidebarBtn,SidebarRoute } from "./sidebar.element";    
export const SideBar = ({isOpen,toggle})=> {  
    return(

        <SidebarContainer isOpen={isOpen} onClick={toggle}>
            <Icon onClick={toggle}>
            <CloseIcon/>
             </Icon>    
                <SidebarMenu>
                    <SidebarLink to="/">Pizzas</SidebarLink>
                    <SidebarLink to="/">Desserts</SidebarLink>
                    <SidebarLink to="/"> Full Menu</SidebarLink>
                </SidebarMenu>
                <SidebarBtn>
                    <SidebarRoute to="/">Order Now</SidebarRoute>
                </SidebarBtn>
            
        </SidebarContainer>
    );
}

Navbar.js 包含图标和道具切换的组件

import React from 'react';
import { Nav, NavLink, NavIcon, PizzaIcon} from './NavbarElements'; 

export const Navbar = ({toggle}) => {  
    return (
     
            <Nav>
                <NavLink to='/'>
                    Muncheese
                </NavLink>
                <NavIcon onClick={toggle}>
                    <p>Menu</p>
                    <PizzaIcon/>
                </NavIcon>
            </Nav>
       
    )
}

Answer 1

不太确定您的 isOpen 做什么。您是否在 SidebarContainer 中声明了该部分？

尝试将其更改为像这样有条件地渲染

{ isOpen ? <SideBar toggle={toggle}/> : null }

另外值得指出的是，在您的侧边栏中，您已经为整个侧边栏组件设置了 onClick 事件侦听器。Icon 中的 onClick 不是必需的，除非您希望此组件的特定部分执行切换功能，然后您需要删除 SidebarContainer 中的 onClick。

<SidebarContainer isOpen={isOpen} onClick={toggle}>