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

Question

我正在做一个 React 项目，我使用MUI Tab 组件将一些页面划分为选项卡，因此我可以在一个页面中有多个组件并相应地渲染每个组件，因此我创建了 Tabs 组件。 但是，我只能看到一个第一个索引选项卡。

可重用的选项卡 MUI 组件：

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>
  );
}

这是我使用它的方式：

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

Answer 1

如果您想要可重复使用的标签，我认为使用children不是一个好主意。 那是因为你的标签必须是一致的：如果你有 3 个子节点，你也应该有 3 个标签标签。 如果您使用的是children ，您很容易忘记这一点。

但是，如果您想制作一个可重用的选项卡组件，我建议将包含选项卡标签和 Component 的对象数组作为属性传递给您的自定义Tab组件。 这是我的意思的一个例子：

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>
  );
}

然后你可以像这样使用这个组件：

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>
  );
}

这是带有完整示例的 Codesandbox