我正在使用 Material UI 作为当前项目的必备库。一个页面需要四个选项卡,因此我正在使用来自 Material UI 库的选项卡组件。
当我呈现包含选项卡的页面时,默认情况下第一个选项卡是活动选项卡。我想将第四个选项卡设置为活动选项卡。
从文档中,我看到了 Tab 的 "value" 属性。因此,我分别为每个选项卡设置了值 1、2、3 和 4。当我导航到相应的屏幕时,我会调度一个操作,该操作会在存储中设置选项卡值属性为 4。
然后,通过 mapStateToProps,我使这个属性可访问我的组件。所以当我进入页面时,值是四,但仍然是第一个选项卡处于活动状态。让我展示我的代码:
当我呈现包含选项卡的页面时,默认情况下第一个选项卡是活动选项卡。我想将第四个选项卡设置为活动选项卡。
从文档中,我看到了 Tab 的 "value" 属性。因此,我分别为每个选项卡设置了值 1、2、3 和 4。当我导航到相应的屏幕时,我会调度一个操作,该操作会在存储中设置选项卡值属性为 4。
然后,通过 mapStateToProps,我使这个属性可访问我的组件。所以当我进入页面时,值是四,但仍然是第一个选项卡处于活动状态。让我展示我的代码:
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
)