は、必要に応じてナビゲーションバーに項目を表示できませんでした

Question

私は、アプリケーションの開発にreactjsとmaterial-uiを使用しています。私はダッシュボードを開発しています。私はコンポーネントのための反応 - MDLを使用し、それを使用する前に、navbarコンポーネントが期待どおりに動作しています。私はmaterial-uiを使いたいと思っていますが、多くのコンポーネントとサポートがあります。それは反応型mdlより成熟している。私がAppBarを使用していたNavbarコンポーネント以外はすべて完全に動作しています。

以下は、navbarのスクリーンショットです。これは、material-uiとreact-mdlの両方を使用して設計されています。私は2番目のnavbar（それは反応-mdlを使って設計されている）が私ができなかったmaterial-uiを使いたい。私はAppBar内のタブを使用してみましたが、運はありませんでした。コンセプトには最初に2つのタブがあり、右側にある追加アイコンがクリックされると、そこに新しいタブが追加されます。どうすれば同じようにデザインできますか？ここで

私のコードは、あなたが<AppBar/>コンポーネントにタイトルとしてcomponentを渡す経由でこれを行うことができ

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

です。

チェック次ペンは：

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

代わりに少しトリッキーですnavBar内tabsを使用して、あなたは<a>を使用して、特定のページをレンダリングするためにルートを扱うことができます。

Answer 2

これは1つの方法です。ナビゲーション項目をあなたの州の配列に入れてください。この配列に新しい項目を追加できます。項目を表示するには、ナビゲーションバーにタブを使用します。

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>