Question

我必须使用React＆Material-UI框架构建一个Web应用程序。

我使用选项卡组件在其中显示多张卡片（包括图表）。第一个选项卡效果很好，但是当我想切换到第二个选项卡时，该选项卡内没有显示。最糟糕的是，我无法返回第一个标签； Tabs组件完全失效。

您可以在这里找到我的代码：

class NavTabs extends React.Component {
state = {
    value: 0,
  };

  handleChange = (value) => {
    this.setState({ value });
  };

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

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs fullWidth value={value} onChange={this.handleChange}>
            <Tab label="FINANCIAL" />
            <Tab label="OPERATIONAL" />
            <Tab label="PLANNING" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>
          <div className={classes.card_up}>
            <CashWindow />
            <SalesWindow />
          </div>
          <div className={classes.card_up}>
            <CostsWindow />
            <MarginsWindow />
            <ContingenciesWindow />
          </div>
          <Button className={classes.button_more}>Details</Button>
          </TabContainer>}
        {value === 1 && <TabContainer>
          <div className={classes.card_up}>
            <OpportunitiesWindow />
            <CriticalIssuesWindow />
          </div>
          <div className={classes.card_up}>
          <QualityWindow />
          </div>
          <Button className={classes.button_more}>Details</Button>
        </TabContainer>}
        {value === 2 && <TabContainer>
          <div className={classes.card_up}>
            <ResourcesWindow />
          </div>
        </TabContainer>}
      </div>
    );
  }
}

其他组件没有任何错误，因为当我尝试将第二个选项卡的组件移至第一个选项卡时，它可以工作。我的结论是问题出在选项卡组件上。

有人知道如何解决此问题吗？也许我做错了，我是React编程的初学者。

选项卡组件，包括卡崩溃

0 个答案: