坐落在材料界面的選項卡組件

Question

我使用的材料作爲UI強制性庫當前 項目爲活動的標籤。項目的頁面需要四個選項卡，所以我使用材料ui庫中的選項卡組件。

當我渲染它默認包含的標籤頁面中的第一個標籤是有源標籤。我想將第四個選項卡設置爲活動狀態。

從文檔中，我看到Tab的「值」prop。所以我將我的四個選項卡的值分別設置爲1,2,3和4。當Inavigate到相應的屏幕，我派遣其設置屬性選項卡值在我的商店爲4

然後雖然mapStateToProps我正在做這個屬性來我的組件訪問的動作。所以當我進入頁面時的值是4，但仍然是活動的Tab是第一個。讓我告訴你我的代碼：

const mapStateToProps = state => ({ 
    value: state.get('tabValue'); 
}); 

const mapDispatchToProps = dispatch => ({ 
tabClicked:() => setActiveTab('tabValue', 4) 
}) 

而且我的組件：

const Tabs = ({ value }) => (
<Tabs> 
    <Tab value={1}></Tab> 
    .... 
    <Tab value={value}</Tab> 
</Tabs 

）

Answer 1

，以便您選擇默認使用initialSelectedIndex不同的選項卡。 這將是形式的

<Tabs initialSelectedIndex={value}> 
    <Tab value={1}></Tab> 
    ... 
    <Tab value={4}></Tab> 
</Tabs> 

檢查http://www.material-ui.com/#/components/tabs