我正在尝试在ReactJS中创建一个菜单，该菜单具有带有图标的SideBar和一个BurgerMenu，在其中显示与图标匹配的标题。从侧边栏或BurgerMenu中选择菜单项时，它会更改其颜色。如果我从汉堡菜单中选择一个项目，则一切正常，但是，如果我从侧边栏选择它，则在汉堡菜单中，上一个项目仍保持彩色。似乎汉堡菜单中的项目没有重新显示，我找不到解决方案。这是代码：
import React from 'react';
import styled from "styled-components";
import NavItem from "./NavItem";
import BurgerSideNav from "./burger-nav/BurgerSideNav";
/* This defines the actual bar going down the screen */
const StyledSideNav = styled.div`
position: fixed; /* Fixed Sidebar (stay in place on scroll and position relative to viewport) */
height: 100%;
width: 75px; /* Set the width of the sidebar */
z-index: 1; /* Stay on top of everything */
top: 3.4em; /* Stay at the top */
background-color: #222; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 10px;
`;
class SideNav extends React.Component {
constructor(props) {
super(props);
this.state = {
activePath: this.props.activePath,
items: [
{
path: '/', /* path is used as id to check which NavItem is active basically */
name: 'Home',
css: 'fa fa-fw fa-home',
key: 1 /* Key is required, else console throws error. Does this please you Mr. Browser?! */
},
{
path: '/news',
name: 'News',
css: 'fas fa-newspaper',
key: 2
},
{
path: '/info',
name: 'Info',
css: 'fas fa-info',
key: 3
},
{
path: '/profile',
name: 'Profile',
css: 'fas fa-id-card',
key: 4
},
{
path: '/coordinator',
name: 'Coordinator',
css: 'fas fa-user-tie',
key: 5
},
{
path: '/contact',
name: 'Contact',
css: 'fas fa-address-book',
key: 6
},
]
}
}
onItemClick = (path) => {
this.setState({activePath: path}); /* Sets activePath which causes rerender which causes CSS to change */
};
render() {
const { items, activePath } = this.state;
return (
<div>
<StyledSideNav>
<BurgerSideNav
activePath = {activePath}
onItemClick={this.onItemClick}
/>
{
/* items = just array AND map() loops thru that array AND item is param of that loop */
items.map((item) => {
/* Return however many NavItems in array to be rendered */
return (
<NavItem
path={item.path}
name={item.name}
css={item.css}
onItemClick={this.onItemClick} /* Simply passed an entire function to onClick prop */
active={item.path === activePath}
key={item.key}
/>
)
})
}
</StyledSideNav>
</div>
);
}
}
export default SideNav
import React from "react"
import "../sideNav.css"
import BurgerNavItem from "./BurgerNavItem";
class BurgerSideNav extends React.Component {
constructor(props) {
super(props);
this.state = {
showNav: false,
activePath: this.props.activePath,
items: [
{
path: '/',
name: 'Acasa',
css: 'fa fa-fw fa-home',
key: 1
},
{
path: '/news',
name: 'Noutati',
css: 'fas fa-newspaper',
key: 2
},
{
path: '/info',
name: 'Despre lucrare',
css: 'fas fa-info',
key: 3
},
{
path: '/profile',
name: 'Profil student',
css: 'fas fa-id-card',
key: 4
},
{
path: '/coordinator',
name: 'Coordonator',
css: 'fas fa-user-tie',
key: 5
},
{
path: '/contact',
name: 'Contact',
css: 'fas fa-address-book',
key: 6
},
]
};
}
openNavClick = e => {
e.preventDefault();
this.openNav()
};
closeNavClick = e => {
e.preventDefault();
this.closeNav()
};
openNav = () => {
this.setState({
showNav: true
});
document.addEventListener("keydown", this.handleEscKey)
};
closeNav = () => {
this.setState({
showNav: false
});
document.removeEventListener("keydown", this.handleEscKey)
};
handleEscKey = e => {
if (e.key === "Escape") {
this.closeNav()
}
};
onItemClick = (path) => {
const {onItemClick} = this.props;
this.setState({ activePath: path });
onItemClick(path);
};
render() {
const { items, activePath, showNav } = this.state;
let navCoverStyle = { width: showNav ? "100%" : "0" }
let sideNavStyle = { width: showNav ? "250px" : "0" }
return (
<React.Fragment>
<span onClick={this.openNavClick}>
<i className="fas fa-bars open-nav"/>
</span>
<div
onClick={this.navCoverClick}
class="nav-cover"
style={navCoverStyle}
/>
<div name="side-nav" class="side-nav" style={sideNavStyle}>
<a href="#" onClick={this.closeNavClick} class="close-nav">
×
</a>
{
items.map((item) => {
return (
<BurgerNavItem
path={item.path}
name={item.name}
css={item.css}
onItemClick={this.onItemClick}
active={item.path === activePath}
key={item.key}/>
)
})
}
</div>
})
</React.Fragment>
)
}
}
export default BurgerSideNav
在BurgerSideNav组件中，您已经在构造函数中设置了状态，说
activePath：this.props.activePath
但是当StyledSideNav组件中的状态更改时，您无需再次设置状态，要再次设置状态，请实现componentWillReceiveProps
例如：
componentWillReceiveProps(nextProps) {
if (this.props.activePath !== nextProps.activePath) {
this.setState({
activePath: nextProps.activePath
})
}
}
如果我正确理解了这个问题，如果要重新渲染，可以将activePath作为key的一部分传递，以轻松地强制重新渲染：
return (
<NavItem
path={item.path}
name={item.name}
css={item.css}
onItemClick={this.onItemClick}
active={item.path === activePath}
key={`${item.key}-${activePath}`}
/>
);
要注意的一件事是，您可能只需要在父组件（SideNav）中定义的activePath，如果您不想同时为两者设置样式，则不需要在两者中都定义，因此为什么都保持'启用'。
而且，您的商品不会更改，因此它们应该在其他地方保持不变，而不是成为您状态的一部分。也许在常量文件中：
// PathContants.js
export default PathConstants = [
{
id: 1,
path: '/home',
},
..
];
如果路径始终是唯一的，则您只能将路径本身用作键key={item.path}，因为该键实际上是字符串。无需存储密钥本身。