無法顯示導航欄中的項目根據需要

我正在使用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

無法顯示導航欄中的項目根據需要

回答

相關問題