Question

学习反应，并使用semantic-ui-react Menu来构建SideBarMenu，并在下面填写问题

单击Menu.Item会如何触发父组件（SBMenu）render？
诸如change in state or props触发了组件上的渲染，但是SBMenu发生了什么变化？
为什么SBMenu render函数被两次调用？

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

SidebarMenu

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呈现两次，因为您在menuItems中使用了相同的名称。

如果更改menuItems名称，现在应该可以正常工作。

语义UI反应-Menu.Item单击触发组件两次渲染

1 个答案: