【问题标题】：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会更好

标签： reactjs react-hooks styled-components sidebar use-state

【解决方案1】：

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

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

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

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

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

【讨论】：

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