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

我正在使用reactjs和MaterialUI开发我的应用程序。我正在开发一个仪表板。在我将react mdl用于组件并使用它之前，navbar组件按预期工作。我想使用MaterialUI，尽管它有很多组件和支持。它比反应mdl成熟。除了我使用AppBar的navbar组件之外，所有的东西都工作得很好

下面是我使用material ui和react mdl设计的navbar的屏幕截图。我想要第二个导航栏（它是使用react mdl设计的），使用我无法使用的材质ui。我尝试在AppBar中使用tab，但没有成功。其概念是，首先将有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>
)

render（）{
常量导航=(
删除
加上一个圆圈
)
返回(
)

您可以通过将

组件作为

您可以使用
并处理呈现特定页面的路径，而不是在
导航栏中使用
选项卡
，这有点棘手。
您可以通过将
组件
作为

您可以使用
并处理呈现特定页面的路径，而不是在
导航栏中使用
选项卡
（这有点棘手）。
这里有一种方法-将导航项目放入处于您状态的数组中。您可以向该数组添加新项目。使用导航栏中的选项卡显示项目：

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>

getInitialState（）{
常量导航=[
{id:0，说明：“仪表板”}，
{id:1，description:“我的设备”}，
{id:2，description:“Follow”}
]; 
}
render（）{
{this.state.navigation.map（函数（结果，索引）{
返回
})}        

检查库swipeableviews:。可以将视图放置在同一个渲染函数中，以便每个选项卡都有相应的视图来显示菜单内容

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


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

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>

getInitialState（）{
常量导航=[
{id:0，说明：“仪表板”}，
{id:1，description:“我的设备”}，
{id:2，description:“Follow”}
]; 
}
render（）{
{this.state.navigation.map（函数（结果，索引）{
返回
})}        

检查库swipeableviews:。可以将视图放置在同一个渲染函数中，以便每个选项卡都有相应的视图来显示菜单内容

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


...
这项工作，但我创建了一个状态内部导航数组，因为用户应该可以添加选项卡。非常感谢分享知识。这项工作，但我创建了状态内部导航数组，因为用户应该可以添加选项卡。非常感谢分享知识。非常感谢分享知识。非常感谢分享知识。