semantic-ui-react - Menu.Item 单击触发器组件呈现两次

Question

学习反应并使用semantic-ui-react Menu来构建侧边栏菜单，并有以下问题

• 单击Menu.Item触发父组件 (SBMenu( 如何render？
  就像组件上的渲染是由于change in state or props而触发的，但是SBMenu有什么变化？
• 为什么SBMenurender函数被调用两次？

Rendering .... future
Rendering .... future

侧边栏菜单

import React from 'react';
import { Sidebar, Menu, Segment, Icon } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import SBMenu from './SBMenu'
import './SidebarMenu.css';
import SBRoutes from './SBRoutes'

const menuItems = [
{ icon: 'dashboard', label: 'Future ITEM', name: 'future', url: '/future' },
{ icon: 'dashboard', label: 'Future ITEM1', name: 'future', url: '/future1' }
];
class SidebarMenu extends React.Component {
constructor(props) {
super(props);
this.handleItemClick = this.handleItemClick.bind(this);
}
handleItemClick () {
console.log('item clicked')
}
/*shouldComponentUpdate() {
return true;
}*/
render() {
console.log("SidebarMenu called....")
return (
<Sidebar.Pushable as={Segment} className="SidebarMenu">
<Sidebar
as={Menu}
borderless
animation="push"
icon="labeled"
inverted
onHide={this.handleSidebarHide}
vertical
visible={true}
width="thin"
>
<SBMenu menuItems={menuItems} />
</Sidebar>
<Sidebar.Pusher>
<div className="container">
<SBRoutes />
</div>
</Sidebar.Pusher>
</Sidebar.Pushable>
);
}
}

export default SidebarMenu;

SBMenu

class SBMenu extends React.Component {
constructor(props) {
super(props);
}

render() {
const {location,menuItems} = this.props;
console.log("Rendering .... " + location.pathname)
return (menuItems.map((item, index) => (
<Menu.Item
name={item.name}
as={Link}
to={item.url}
active={location.pathname === item.url}
data-menu={item.label}
key={`menu_item_${index}`}
>
<Icon name={item.icon} />
{item.label}
</Menu.Item>
))
);
}
}
export default withRouter(SBMenu);

Answer 1

您可以使用向上提升状态将子状态从父级更改为父级。您只需将方法传递给 SBMenu 并使用它即可。

SBMenu 呈现两次，因为您在菜单项中使用相同的名称。

如果您更改菜单项名称，它现在应该可以正常工作。