在 Material ui 选项卡组件中将选项卡设置为活动状态

Question

我使用 Material ui 作为当前项目的强制库。项目的一个页面需要四个选项卡，因此我使用 Material ui 库中的选项卡组件。

当我渲染默认包含选项卡的页面时，第一个选项卡是活动选项卡。我想将第四个选项卡设置为活动状态。

从文档中，我看到选项卡的“ 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

）

Answer 1

默认情况下，您可以使用initialSelectedIndex 选择不同的选项卡。

对于旧版本的 Material ui，它将采用以下形式

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

对于较新版本 >4

<Tabs value={value}>
  <Tab label="Tab1" />
  <Tab label="Tab2" />
  <Tab label="Tab3" />
</Tabs>

检查https://material-ui.com/components/tabs/