Javascript 我试图在我的项目中使用react simple nav，但出乎意料地没有出现。有人能说出我在这里错过了什么吗？

下面是我所有的代码，表明我正在做所有需要的事情来呈现一个正确的侧边栏，但它并没有发生在我的代码中

如果我去组件树，可以看到它，但它不是渲染

更新： 如果我将showNav的初始状态设置为true，则显示侧栏，但不显示菜单图标。。。我需要看到菜单图标，以便在需要时打开侧边栏

这是my package.json：

{
  "name": "childmiles",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.4.1",
    "bootstrap-social": "^5.1.1",
    "font-awesome": "^4.7.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0",
    "react-simple-sidenav": "^1.0.1",
    "reactstrap": "^8.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我的主要组件，我将其称为侧栏：

import React, { Component } from 'react';
import Header from './HeaderComponent';
import SideBar from './SideBarComponent';

class Main extends Component {

    render(){
        return(
            <div>
                <Header />
                <SideBar/>
            </div>
        );
    }
}

export default Main;

import React，{Component}来自'React'；
从“./HeaderComponent”导入标题；
从“./SideBarComponent”导入侧边栏；
类主扩展组件{
render（）{
返回(
);
}
}
导出默认主；

这是侧边栏本身：

import React, { Component } from 'react';
import SideNav, {MenuIcon} from 'react-simple-sidenav';

export default class SideBar extends Component {
    constructor(props){
        super(props);
        this.state = {
            showNav : false
        };
    }
    render() {
        return(
            <div>
                <MenuIcon onClick={() => this.setState({showNav: true})}/>

                <SideNav
                    showNav = {this.state.showNav}
                    onHideNav = {() => this.setState({showNav: false})}
                    title          =  "Hello World"
                    items          =  {['home', 'services', 'about', 'contact']}
                    titleStyle     =  {{backgroundColor: '#4CAF50'}}
                    itemStyle      =  {{backgroundColor: '#fff'}}
                    itemHoverStyle =  {{backgroundColor: '#CDDC39'}} />
            </div>
            )
        }
}

import React，{Component}来自'React'；
从'react simple SideNav'导入SideNav，{MenuIcon}；
导出默认类边栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showNav:错误
};
}
render（）{
返回(
this.setState（{showNav:true}）}/>
this.setState（{showNav:false}）
title=“你好，世界”
items={['home'，'services'，'about'，'contact']}
标题样式={{backgroundColor:'#4CAF50'}}
itemStyle={{backgroundColor:'#fff'}}
itemHoverStyle={{backgroundColor:'#CDDC39'}}/>
)
}
}

由于我的声誉不好，我无法发表评论。可能是您缺少组件的CSS吗

尝试包括CSS（如果有的话）

确保菜单图标的onClick方法已触发

在菜单图标组件的onClick方法中选中this关键字

---

我也有同样的问题，我认为它没有被渲染，出了问题，但事实并非如此

刚刚测试了你的代码，它对我来说很有魅力，汉堡包菜单出现了，当我点击时，它代表了副菜单。问题是，图标在白色背景中不可见，因此我所做的是为测试目的为

div

添加了蓝色背景色，如下所示：

render() {
    return <div className="bg">
        <MenuIcon onClick={() => this.setState({showNav: true})}/>

        <SideNav
            showNav = {this.state.showNav}
            onHideNav = {() => this.setState({showNav: false})}
            title          =  "Hello World"
            items          =  {['home', 'services', 'about', 'contact']}
            titleStyle     =  {{backgroundColor: '#4CAF50'}}
            itemStyle      =  {{backgroundColor: '#fff'}}
            itemHoverStyle =  {{backgroundColor: '#CDDC39'}} />
    </div>
}

代表：

---

我希望这有帮助

您能否尝试检查div元素并在

MenuIcon

中找到它？如果你发现了，试着点击它，我仍然认为这只是一个

CSS

问题。或者可以将其从

MenuIcon

更改为

this.setState（{showNav:true}）}>单击我

。谢谢@如果解决方案对你有用，请考虑接受和支持我的答案。非常感谢。我这样做了，只是因为我没有足够的分数，所以没有出版（@Elitedasilvarodrigues只需单击绿色勾号即可✔️, 它不需要反悔，这就是你在Stackoverflow中作为新来者获得积分的方式。

.bg {  
    background-color: blue;
}