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

Question

Material UI 文档有 the following example选项卡和选项卡组件的组成:

<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 包裹在另一个组件中？如果是这样，我应该如何设计选项卡的样式？

完整代码如下:

• Original documentation example
• My modification

Answer 1

您混淆了值(value)和标签。您还必须将值传递给选项卡。

这是一个工作的 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 以获得“默认选项卡”。