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

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

而不是使用 tabs里面navBar这有点棘手，你可以使用 <a>并处理渲染特定页面的路由。