如何在 React 中制作可重用的 Material UI 选项卡组件

Question

I am working on a React project, and I divided some of the pages into tabs using the MUI Tab component , so I can have multiple components in one page and render each component accordingly, so I have created the Tabs component. However, I can only see one first index tab.

Reusable tab MUI component:

export default function useTabs(props) {
  const { children, value, index, label, ...other } = props;

  const [selectedValue, setSelectedValue] = React.useState(0);

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

  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={selectedValue}
          onChange={handleChange}
          className={classes.tab}
          textColor="primary"
          indicatorColor="primary"
        >
          <Tab label={label} {...a11yProps(0)} className={classes.tabText} />
          {/* <Tab className={classes.tabText} label={label} {...a11yProps(1)} /> */}
        </Tabs>
      </Box>
      <TabPanel value={selectedValue} index={index}>
        {children} // Rendering tab children here, but getting only the first component
      </TabPanel>
    </Box>
  );
}

Here is how I am using it:

// Import the reusable component
import Tab from "../common/Tabs";
export default function JobsRecruitments() {
    return (
    <>
    <Tab label="tab name" index={0}>
        <MyComponent />
    </Tab>
    </>
    )
}

Answer 1

I don't think it's a good idea to use children if you want reusable tabs. That's because your tabs have to be consistent: if you have 3 child nodes, you should also have 3 tab labels. If you're using children , you can easily lose track of that.

However, if you want to make a reusable tab component, I would suggest passing an array of objects containing the tab label and Component as a property to your custom Tab component. Here's an example of what I mean:

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

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

  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
        >
          {tabs.map(({ label }, i) => (
            <Tab label={label} key={i} />
          ))}
        </Tabs>
      </Box>
      {tabs.map(({ Component }, i) => (
        <TabPanel value={value} index={i} key={i}>
          {Component}
        </TabPanel>
      ))}
    </Box>
  );
}

And then you can use this component like this:

import Tabs from "./MyTabs";

const tabs = [
  {
    label: "Tab 1",
    Component: <div>Hello, I am tab 1</div>
  },
  {
    label: "Tab 2",
    Component: <div>Hello, I am tab 2</div>
  },
  {
    label: "Tab 3",
    Component: (
      <div>
        <h1>Tab with heading</h1>
        <p>Hello I am a tab with a heading</p>
      </div>
    )
  }
];

export default function App() {
  return (
    <div>
      <Tabs tabs={tabs} />
    </div>
  );
}

Here's the Codesandbox with the full example