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

我使用的材料作为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

回答:

,以便您选择默认使用initialSelectedIndex不同的选项卡。 这将是形式的

<Tabs initialSelectedIndex={value}> 

<Tab value={1}></Tab>

...

<Tab value={4}></Tab>

</Tabs>

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

以上是 坐落在材料界面的选项卡组件 的全部内容, 来源链接: utcz.com/qa/262175.html

回到顶部