Question

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

我是该项目的新手，我更新了reactjs和material-ui。

所以，很多东西都被弃用了关于材料-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>

Answer 2

如果您将地图移到LeftNav之外，则不应再收到此警告。当我撰写我的LeftNav时，我遵循这种模式并且我没有收到您报告的错误。希望这会有所帮助。

    let menuItems = 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 ref="leftNav"
         docked={false}
         style={{opacity: '0.9'}}
         //menuItems={menuItems}
         //onChange={this.leftNavOnChange}
         >
          { menuItems }
    </LeftNav>

Material-ui在旧的LeftNav菜单样式和具有Reactjs的可组合性之间转换

2 个答案: