在react原生中自动移动材料选项卡栏

import React from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import SwipeableViews from 'react-swipeable-views';

const TabPanel = ({ children, value, index }) => {
  return (
    <div hidden={value !== index}>
      {value === index && <div>{children}</div>}
    </div>
  );
};

const AutoMovingTabs = () => {
  const [value, setValue] = React.useState(0);

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

  return (
    <div>
      <Tabs value={value} onChange={handleChange} variant="scrollable" scrollButtons="auto">
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
        {/* 可以添加更多的选项卡 */}
      </Tabs>
      <SwipeableViews index={value} onChangeIndex={handleChange}>
        <TabPanel value={value} index={0}>
          {/* Tab 1的内容 */}
        </TabPanel>
        <TabPanel value={value} index={1}>
          {/* Tab 2的内容 */}
        </TabPanel>
        <TabPanel value={value} index={2}>
          {/* Tab 3的内容 */}
        </TabPanel>
        {/* 可以添加更多的选项卡内容 */}
      </SwipeableViews>
    </div>
  );
};

export default AutoMovingTabs;