Material-ui在舊的LeftNav菜單樣式和具有Reactjs的可組合性之間轉換

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我的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>