Material-ui LeftNav工具栏不能正常工作

问题描述:

以下是我用Toolbar实现LeftNav的代码。我正在为流星使用Material-UI包。 LeftNav完全不显示。当与AppBar使用类似的配置时,它工作正常。需要一些帮助来解决问题。Material-ui LeftNav工具栏不能正常工作

var {Toolbar, ToolbarGroup, , ToolbarTitle, FontIcon,FlatButton,ToolbarSeparator,IconButton,LeftNav,FlatButton} = MUI; 

    let {SvgIcons} = MUI.Libs; 
    let LeftIcon = <SvgIcons.NavigationExpandMore /> 

let LeftIcon = <SvgIcons.NavigationExpandMore /> 

var menuItems = [ 
    { route: 'get-started', text: 'Get Started' }, 
    { route: 'customization', text: 'Customization' }, 
    { route: 'components', text: 'Components' }, 
    { type: MenuItem.Types.SUBHEADER, text: 'Resources' }, 
    { 
     type: MenuItem.Types.LINK, 
     payload: 'https://github.com/callemall/material-ui', 
     text: 'GitHub' 
    }, 
    { 
     text: 'Disabled', 
     disabled: true 
    }, 
    { 
     type: MenuItem.Types.LINK, 
     payload: 'https://www.google.com', 
     text: 'Disabled Link', 
     disabled: true 
    } 
    ]; 
    injectTapEventPlugin(); 

    Header = React.createClass({ 

     _toggle(e){ 
      e.preventDefault() 
      this.refs.leftNav.toggle() 
     }, 

     render(){ 
      return(
       <div> 
        <LeftNav ref="leftNav" docked={false} menuItems={menuItems onLeftIconButtonTouchTap={this._toggle}} /> 
       <Toolbar> 
        <ToolbarGroup key={0} float="left"> 
         <ToolbarTitle text="React" /> 
        </ToolbarGroup> 
        <ToolbarGroup key={1} float="right"> 
         <FontIcon className="muidocs-icon-custom-sort" /> 
         <FlatButton label="Questions" linkButton={true} href="/login" secondary={true}/>} 
         <ToolbarSeparator/> 
         {Meteor.userId() ? <FlatButton label="Logout" onClick={Meteor.logout}/> : <FlatButton label="Login" linkButton={true} href="/login" primary={true}/>} 
        </ToolbarGroup> 
       </Toolbar> 
       </div>   
      ) 
     } 
    }); 
+0

这里是错字: 的菜单项= {的菜单项onLeftIconButtonTouchTap = {this._toggle}} 我想应当是 的菜单项= {}的MenuItems onLeftIconButtonTouchTap = {this._toggle} – Andrew

我现在只是看着这个。这可能是这些被弃用的物品? https://github.com/callemall/material-ui/issues/2491

然而,这是一个使用0.14 - 不知道你是哪个版本的

更新:我这里有一个工作示例和代码: https://github.com/dcsan/react-hot/blob/master/app/client/layouts/MainLayout.jsx#L25-L53

演示 http://react-hot.meteor.com

希望这有帮助!