无法显示导航栏中的项目根据需要

我正在使用reactjs和material-ui来开发我的应用程序。我正在开发一个仪表板。在使用react-mdl作为组件并使用它之前，导航栏组件按预期工作。我想使用material-ui，虽然它有很多组件和支持。它比react-mdl成熟。除了navbar组件，我已经使用AppBar，一切都运行完美。无法显示导航栏中的项目根据需要

下面是navbar的截图，我使用了material-ui和react-mdl。我想要第二个导航栏（它是使用react-mdl设计的）使用material-ui，我不能。我尝试使用AppBar内的标签，但没有运气。概念是，首先会有2个选项卡，当点击右侧的添加图标时，用户可以在那里添加一个新选项卡。我怎样才能以同样的方式设计它？

这里是我的代码

render() { 
    const navigation = (
     <BottomNavigation style={{ background:'transparent'}}> 
     <i className="material-icons md-23">delete</i> 
     <i className="material-icons md-23">add_circle</i> 
     </BottomNavigation> 
    ) 

    return (
     <div> 
     <div className="mdlContent" style={{height: '900px', position: 'relative'}}> 
     <AppBar iconElementRight={navigation} > 
     </AppBar> 
)

来源

2016-10-04 Serenity

您可以通过传递一个component作为标题为<AppBar/>组件做到这一点。

检查下列笔：

https://codepen.io/pranesh-r/pen/LROLbo

使用tabs的navBar这是一个有点棘手内，而不是，您可以使用<a>和处理路线呈现特定页面。

来源

2016-10-04 04:21:21

这项工作，但我创建了一个内部导航数组，因为用户应该添加选项卡。 – Serenity

非常感谢分享知识。 – Serenity

以下是一种方法 - 将您的导航项放入状态的数组中。您可以将新项目添加到此阵列。使用标签在导航栏中显示的项目：

getInitialState(){ 
    const navigation = [ 
    { id: 0, description: "Dashboard"}, 
    { id: 1, description: "My Device"}, 
    { id: 2, description: "Follow"} 
    ]; 
} 

render(){ 
<div> 
    <Tabs onChange={this.handleChange}> 
    {this.state.navigation.map(function(result, index){ 
     return <Tab key={result.id} label={result.description} value={index}/> 
    })}   
    </Tabs> 
</div>

退房库swipeableviews：https://github.com/oliviertassinari/react-swipeable-views。您可以将视图放置在同一个渲染函数中，以便每个选项卡都有相应的视图来显示菜单内容。

<div> 
    <SwipeableViews> 
    ... 
    </SwipeableViews 
</div>

来源

2016-10-04 04:31:21 genestd

非常感谢分享知识。 – Serenity

无法显示导航栏中的项目根据需要

回答

相关问题