我目前是这个框架的新手,对此错误我有疑问。为什么此错误显示在我的控制台上。汉堡图标显示在我的导航栏顶部。我将此https://medium.com/zestgeek/ant-design-navbar-with-responsive-drawer-a8d718e471e0用于响应抽屉的导航。我只是遵循他在每个组件上插入的代码,但是我修改了其中的一些代码。我希望有人可以帮助我。
网站输出:
错误:
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Navigation component.
导航Js:
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import LeftMenu from './LeftMenu';
import RightMenu from './RightMenu';
import { Drawer, Button } from 'antd';
class Navigation extends Component {
constructor(props) {
super(props);
this.state = {
current: 'mail',
visible: false
};
this.showDrawer = this.showDrawer(this);
this.onClose = this.onClose(this);
}
showDrawer(){
this.setState({
visible: true,
});
}
onClose(){
this.setState({
visible: false,
});
}
render() {
return (
<nav className="menuBar">
<div className="logo">
<a href="">logo</a>
</div>
<div className="menuCon">
<div className="leftMenu">
<LeftMenu />
</div>
<div className="rightMenu">
<RightMenu />
</div>
<Button className="barsMenu" type="primary" onClick={this.showDrawer}>
<span className="barsBtn"></span>
</Button>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<LeftMenu />
<RightMenu />
</Drawer>
</div>
</nav>
)
}
}
export default Navigation;
CSS:
<style>
.menuBar{
padding: 0 20px;
border-bottom: solid 1px #e8e8e8;
overflow: auto;
box-shadow: 0 0 30px #f3f1f1;
}
.logo{
width: 150px;
float: left;
}
.logo a{
display: inline-block;
font-size: 20px;
padding: 19px 20px;
text-transform: capitalize;
}
.menuCon{
width: calc(100% - 150px);
float: left;
}
.menuCon .ant-menu-item{
padding: 0px 5px;
}
.menuCon .ant-menu-submenu-title{
padding: 10px 20px;
}
.menuCon .ant-menu-item a, .menuCon .ant-menu-submenu-title a{
padding: 10px 15px;
}
.menuCon .ant-menu-horizontal{
border-bottom: none;
}
.menuCon .leftMenu{
float: left;
}
.menuCon .rightMenu{
float: right;
}
.barsMenu{
float: right;
height: 32px;
padding: 6px;
margin-top: 8px;
display: none;
background: none;
}
.barsBtn{
display: block;
width: 20px;
height: 2px;
background: #1890ff;
position: relative;
}
.barsBtn:after,.barsBtn:before{
content: attr(x);
width: 20px;
position: absolute;
top: -6px;
left: 0;
height: 2px;
background: #1890ff;
}
.barsBtn:after{
top: auto;
bottom: -6px;
}
.ant-drawer-body{
padding: 0;
}
.ant-drawer-body .ant-menu-horizontal > .ant-menu-item, .ant-drawer-body .ant-menu-horizontal > .ant-menu-submenu{
display: inline-block;
width: 100%;
}
.ant-drawer-body .ant-menu-horizontal{
border-bottom: none;
}
.ant-drawer-body .ant-menu-horizontal > .ant-menu-item:hover{
border-bottom-color: transparent;
}
@media(max-width: 767px){
.barsMenu{
display: inline-block;
}
.leftMenu,.rightMenu{
display: none;
}
.logo a{
margin-left: -20px;
}
.menuCon .ant-menu-item, .menuCon .ant-menu-submenu-title{
padding: 1px 20px;
}
.logo a{
padding: 10px 20px;
}
}
</style>
最佳答案
使用粗箭头表示自动绑定的功能
showDrawer = () => {
this.setState({
visible: true,
});
}
onClose = () => {
this.setState({
visible: false,
});
}
并从构造函数中删除以下行
this.showDrawer = this.showDrawer(this);
this.onClose = this.onClose(this);
要么
constructor(props) {
super(props);
this.state = {
current: 'mail',
visible: false
};
this.showDrawer = this.showDrawer.bind(this);
this.onClose = this.onClose.bind(this);
}
如果要隐藏状态更改按钮
<Button className={`barsMenu {!this.state.visible ? 'hideBarsMenu' : ''`} type="primary" onClick={this.showDrawer}>
<span className="barsBtn"></span>
</Button>
并添加一个CSS类
.hideBarsMenu {
display: none;
}