TabPanel Material UI 不显示第二个面板

问题描述

这是当我们滚动到新机器选项卡但不显示任何内容时应显示 2222222 的整个组件 它可能是组件外部发生的事情，但我没有将它包装在任何其他父级中 材料 UI 示例中的代码实际上是相同的，唯一改变的是样式

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
import Grow from "@material-ui/core/Grow";
import { makeStyles,useTheme } from "@material-ui/core/styles";


function TabPanel(props) {
  const { children,value,index,...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,index: PropTypes.any.isrequired,value: PropTypes.any.isrequired,};

function a11yProps(index) {
  return {
    id: `full-width-tab-${index}`,"aria-controls": `full-width-tabpanel-${index}`,};
}

const MachinesStyle = makeStyles((theme) => ({
    root: {
      width: "auto",},appBar: {
      position: "relative",//display:"flex",layout: {
        width: "auto",marginLeft: theme.spacing(1),marginRight: theme.spacing(1),[theme.breakpoints.up(1100 + theme.spacing(2) * 2)]: {
           width:1000,marginLeft:"auto",marginRight:"auto",textAlign: "center",paper: {
        marginTop: theme.spacing(3),marginBottom: theme.spacing(3),padding: theme.spacing(2),[theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
          marginTop: theme.spacing(6),marginBottom: theme.spacing(6),padding: theme.spacing(3),backgroundColor: "#FCFAFA",formControl: {
        margin: theme.spacing(1),minWidth: 80,selectEmpty: {
        marginTop: theme.spacing(2),}));



const Machines = () => {
  const classes = MachinesStyle();
  const theme = useTheme();
  const [value,setValue] = React.useState(0);
  const handleChange = (event,newValue) => {
    setValue(newValue);
  };

  const handleChangeIndex = (index) => {
    setValue(index);
  };

  return (
    <React.Fragment>
      <CssBaseline />
      <main className={classes.layout}>
        <Grow in={true}>
          <Paper className={classes.paper} elevation={10}>
            <div className={classes.root}>
              <AppBar position="static" color="default">
                <Tabs
                  value={value}
                  onChange={handleChange}
                  indicatorColor="primary"
                  textColor="primary"
                  variant="fullWidth"
                  aria-label="full width tabs example"
                >
                  <Tab label="new machine" {...a11yProps(0)} />
                  <Tab label="change machine" {...a11yProps(1)} />
                </Tabs>
              </AppBar>
              <SwipeableViews
                axis={theme.direction === "rtl" ? "x-reverse" : "x"}
                index={value}
                onChangeIndex={handleChangeIndex}
              >
                <TabPanel value={value} index={0} dir={theme.direction}>
                  11111111111111111111111
                </TabPanel>
                <TabPanel value={value} index={1} dir={theme.direction}>
                222222222222222222222
                </TabPanel>
              </SwipeableViews>
            </div>
          </Paper>
        </Grow>
      </main>
    </React.Fragment>
  );
};

export default Machines;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）