坐落在材料界面的选项卡组件

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