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

Question

我正在使用 reactjs 和 material-ui 来开发我的应用程序。我正在开发一个仪表板。在我将 react-mdl 用于组件并使用它之前，导航栏组件按预期工作。我想使用 material-ui，因为它有很多组件和支持。它比 react-mdl 成熟。除了我使用 AppBar 的导航栏组件外，一切都运行良好。

下面是我使用 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>
)

Answer 1

您可以通过将 component 作为标题传递给 <AppBar/> 组件来实现。

检查以下笔：

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

不用在 navBar 中使用 tabs 这有点棘手，您可以使用 <a> 并处理路由以呈现特定页面。

Answer 2

这是一种方法 - 将您的导航项放入您所在州的数组中。您可以向该数组添加新项目。使用导航栏中的选项卡显示项目：

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>

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

could not show items in navbar as per the need

javascript

reactjs

material-ui