当材质 UI 选项卡包裹在另一个组件内时，它会失去与选项卡的连接

Question

Material UI 文档具有以下选项卡和选项卡组件的示例：

<Tabs value={value} onChange={this.handleChange}>
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" href="#basic-tabs" />
</Tabs>

我想创建自己的组件，该组件又创建选项卡（这样我就可以使用 对其进行样式设置withStyles）。所以我将代码修改为：

<Tabs value={value} onChange={this.handleChange}>
    {["one", "two", "three"].map(label => <MyTab label={label} />)}
</Tabs>

function MyTab({ label }) {
    return <Tab label={label} />;
}

然而，这似乎打破了选项卡和选项卡之间的联系。Tabs onChange 事件不再触发。向选项卡添加value属性没有帮助。

我在这里做错了什么？是否不可能将 Tab 包裹在另一个组件中？如果是这样，我应该如何设计选项卡的样式？

这是完整的代码：

• 原始文档示例
• 我的修改

Answer 1

你混淆了价值和标签。您还必须将值传递给选项卡。

这是一个工作的 SimpleTabs 组件渲染函数：

render() {
  const { classes } = this.props;
  const { value } = this.state;

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={this.handleChange}>
          {["one", "two", "three"].map(label => (
            <MyTab key={label} value={label} label={label} />
          ))}
        </Tabs>
      </AppBar>
      {value === "one" && <TabContainer>Item One</TabContainer>}
      {value === "two" && <TabContainer>Item Two</TabContainer>}
      {value === "three" && <TabContainer>Item Three</TabContainer>}
    </div>
  );
}

和 MyTab 组件：

function MyTab(props) {
  return <Tab {...props} />;
}

您还应该考虑设置默认 state.value 以获得“默认选项卡”。