0

我想创建一个包含来自 JSON 文件的选项卡的选项卡栏，并且每个选项卡都必须有自己的组件。我使用了 Reat-Tabs 并按如下方式制作。但是每个面板都没有显示`

import React, { useState } from "react";
import "./toolbar.css";
import ToolbarData from "./toolbar.json";
import { makeStyles } from "@material-ui/core/styles";
import {Tabs,Tab,TabList,TabPanel} from "react-tabs";
import styled from "styled-components";
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

const ToolBar = (props) => {
  const classes = useStyles();
  const [key,setkey] =useState(0)
  const isActive = (id) => {
    return key === id;
  };
  const className = isActive ? 'active' : '';
  const handleActive = (key) => {
    setkey(key);
  };
  const CustomTab = ({ children }) => (
    <Tab>
      <div>{children}</div>
    </Tab>
  );
   
  CustomTab.tabsRole = 'Tab';
   const CustomTabPanel = ({ children, myCustomProp, ...otherProps }) => (
    <TabPanel {...otherProps}>
      <div>{children}</div>
      {myCustomProp && `myCustomProp: ${myCustomProp}`}
    </TabPanel>
  );
   
  CustomTabPanel.tabsRole = 'TabPanel'
  const url = window.location.href.split("/").pop();
  const vals = Object.keys(ToolbarData);
  for (var i = 0; i < vals.length; i++) {
    if (vals[i] === url) {
      const list = vals[i];
      return (
        <div className="toolbar">
          {Object.values(ToolbarData[list]).map((item,i) => (
            <div className={classes.root}>
              <Tabs
                key={i}
                isActive={isActive(item.id)}
                onActiveTab={() => handleActive(item.id)}
              >
                <TabList>
                  <CustomTab className={className} isActive={props.isActive} onClick={props.onActiveTab}> {item.name}</CustomTab>
                </TabList>
              </Tabs>
              <CustomTabPanel children={item.name} />
            </div>
          ))}
        </div>
      );
    }
  }
};
export default ToolBar;

信息直接来自 Json 文件，我从其他地方获取每个选项卡的组件。我尝试了不同的解决方案，但没有得出结论

4

0 回答 0