从Material UI React在TabPanel中添加组件

import React, { useState } from 'react';
import { Tabs, Tab, Box } from '@material-ui/core';

const TabPanel = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div>
      <Tabs value={value} onChange={handleChange}>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
      </Tabs>
      <Box hidden={value !== 0}>
        {/* 在Tab 1中添加组件 */}
        <Component1 />
      </Box>
      <Box hidden={value !== 1}>
        {/* 在Tab 2中添加组件 */}
        <Component2 />
      </Box>
      <Box hidden={value !== 2}>
        {/* 在Tab 3中添加组件 */}
        <Component3 />
      </Box>
    </div>
  );
};

export default TabPanel;