• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:user7334203 5次浏览

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)