一个选项卡栏，其选项卡是从JSON文件创建的，并且每个选项卡都必须具有自己的组件

问题描述

我想创建一个标签栏，其中包含来自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文件，我从其他位置获取每个选项卡的组件。我尝试了不同的解决方案，但没有得出结论

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）