材质UI选项卡上的渲染组件

Question

我一直试图在单击标签内容内部时呈现某些组件。

这就是我一直在做的事情：

import React, { Component } from "react";

export class Global extends Component {
  render() {
    return <div>Global</div>;
  }
}

export default Global;

这是要显示的基本组件。

import React, { Component } from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import IconButton from "@material-ui/core/IconButton";
import SearchIcon from "@material-ui/icons/Search";
import Link from "@material-ui/core/Link";
import Global from "../Dashboard/Global";
import Graficos from "../Dashboard/Graficos";
import Individual from "../Dashboard/Individual";
import Temporais from "../Dashboard/Temporais";
import CSSTransitionGroup from "react-addons-css-transition-group";
import { Paper } from "@material-ui/core";

import { classes } from "../constants/tabs";

function TabContainer(props) {
  return (
    <Typography
      component="div"
      style={{
        padding: 8 * 3
      }}
    >
      {" "}
      {props.children}{" "}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

//const sections = ["Indicador 1", "Indicador 2", "Indicador 2", "Indicador 2"];

const PageShell = (Page, previous) => {
  return props => (
    <div className="page">
      <CSSTransitionGroup
        transitionAppear={true}
        transitionAppearTimeout={600}
        transitionEnterTimeout={600}
        transitionLeaveTimeout={600}
        transitionName={props.match.path === "/one" ? "SlideIn" : "SlideOut"}
      >
        {console.log(props)}
        <Page {...props} />
      </CSSTransitionGroup>
    </div>
  );
};

function ItemOne(theme) {
  return (
    <Paper>
      <div>Item 1</div>
    </Paper>
  );
}

function ItemTwo(theme) {
  return (
    <Paper>
      <div>Item two</div>
    </Paper>
  );
}

export default function Header() {
  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange}>
          {/* <Tabs value={value} onChange={handleChange}>
          {sections.map(section => (
            <Tab label={section} />
          ))}
        </Tabs> */}
          <Tab label="Item One" component={Link} to="/global" />
          <Tab label="Item Two" component={Link} to="/individual" />
          <Tab label="Item Three" component={Link} to="/temporal" />
          <Tab label="Item Four" component={Link} to="/graficos" />
        </Tabs>
      </AppBar>
      <Switch>
        <Route path="/global" component={PageShell(ItemOne)} />
        <Route path="/individual" component={PageShell(ItemTwo)} />
      </Switch>
      {/* {value === 0 && <TabContainer>Item One</TabContainer>}
      {value === 1 && <TabContainer>Item Two</TabContainer>}
      {value === 2 && <TabContainer>Item Three</TabContainer>}
      {value === 3 && <TabContainer>Item Four</TabContainer>} */}
    </div>
  );
}

这是我的材料标头，我正在尝试将全局组件加载到我的标头下方。这个想法是我的标题是固定的，该组件在单击Tab键时呈现。谁能帮我解决我做错的事情吗？