侧边栏菜单由它自己呈现

Posted 2023-03-15

【中文标题】侧边栏菜单由它自己呈现

【英文标题】：The Side-Bar Menu is rendered by its own

【发布时间】：2021-11-18 07:49:25

【问题描述】：

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

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>
       
    )

【问题讨论】：

如果有人需要更多详细信息，请告诉我，我会提供。谢谢

如果我们也看看SidebarContainer会更好

【参考方案1】：

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

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

 isOpen ? <SideBar toggle=toggle/> : null 

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

<SidebarContainer isOpen=isOpen onClick=toggle>

【讨论】：

是的，这是一个很好的评论，感谢您尝试解决我的问题，但是在面对 5 小时的“编译失败”消息后，我自己解决了。