javascript - 旧的 LeftNav 菜单样式与 Reactjs 的可组合性菜单样式之间的 Material-ui 过渡

Question

好吧，所以我对使用material-ui制作LeftNav菜单的方式感到非常困惑。

我是这个项目的新人，我更新了reactjs和material-ui。

因此，Material-ui 中有关 LeftNav 的很多内容已被弃用，我正在尝试修复它。

这是我打开项目时的菜单(带有所有控制台警告):

        <LeftNav ref="leftNav"
             docked={false}
             style={{opacity: '0.9'}}
             menuItems={menuItems}
             onChange={this.leftNavOnChange} />

从此数组:

var menuItems = [
  { route: '/', text: 'Home' },
  { type: 'SUBHEADER', text: 'Connect' },
  { route: '/categories', text: 'Categories' },
  { route: '/icons', text: 'Icons'},
  { route: '/Tmp', text: 'Tmp', disabled: !Permissions['connect_v2_list_tmp']['isPermitted'] },
  { route: '/wizard', text: 'Wizard', disabled: !Permissions['connect_v2_analyze_spreadsheet']['isPermitted'] },
  { route: '/linkshortener', text: 'Link shortener'},
  { type: 'SUBHEADER', text: 'Visual search' },
  { route: '/whitelist', text: 'Whitelist', disabled: !Permissions['connect_v2_list_whitelist']['isPermitted'] },
  { route: '/blacklist', text: 'Blacklist', disabled: !Permissions['connect_v2_list_blacklist']['isPermitted'] },
  { type: 'SUBHEADER', text: 'Tmp-wise' },
  { route: '/viewer', text: 'Viewer', disabled: !Permissions['connect_v2_view_bw_entity']['isPermitted']},
];

这是我根据我对这样做的方式的理解所做的:

        <LeftNav ref="leftNav"
             docked={false}
             style={{opacity: '0.9'}}
             //menuItems={menuItems}
             //onChange={this.leftNavOnChange}
             >
              {menuItems.map(function(items, i) {
                    if (items.route) {
                      return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>;
                    } else {
                      return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>;
                    }
              })}
        </LeftNav>

因此，除了一个警告之外，警告较少:使用左侧导航的方法已被弃用。请参阅文档。 但没什么大不了的。

我的问题是我的链接不起作用。我保持在同一页面上。 我的另一个主要问题是:它的所有风格都消失了。

所以，我的问题是: 我这样做对吗？

或者我错过了reactjs和/或material-ui拥有的东西？

预先非常感谢您花时间处理我的请求。

Answer 1

这就是我所做的(我正在使用react-router):

import { browserHistory } from 'react-router';

handleLeftNav: function (route) {
    browserHistory.push(route);
    this.setState({
      leftNavOpen: false
    });
  },

<MenuItem onTouchTap={() => { return this.handleLeftNav('/route/'); }}>Route</MenuItem>