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

我想创建一个选项卡栏，其中包含来自JSON文件的选项卡，每个选项卡都必须有自己的组件。我使用了Reat标签，并制作如下。但没有显示每个面板 `

import React，{useState}来自“React”；
导入“/toolbar.css”；
从“/toolbar.json”导入工具栏数据；
从“@material ui/core/styles”导入{makeStyles}”；
从“反应选项卡”导入{Tabs，Tab，TabList，TabPanel}；
从“样式化组件”导入样式化；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：theme.palete.background.paper，
},
}));
常量工具栏=（道具）=>{
const classes=useStyles（）；
const[key，setkey]=useState（0）
const isActive=（id）=>{
返回键===id；
};
const className=isActive？'active'：''；
常量handleActive=（键）=>{
设置键（key）；
};
const CustomTab=（{children}）=>(
{儿童}
);
CustomTab.tabsRole='Tab'；
const CustomTabPanel=（{children，myCustomProp，…otherProps}）=>(
{儿童}
{myCustomProp&&`myCustomProp:${myCustomProp}`}
);
CustomTabPanel.tabsRole='TabPanel'
const url=window.location.href.split（“/”）.pop（）；
const vals=Object.keys（工具栏数据）；
对于（变量i=0；i(
handleActive（item.id）}
>
{item.name}
))}
);
}
}
};
导出默认工具栏；

---

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

CustomTabPanel

不显示任何内容单击选项卡不起作用ID您尝试以这种方式向CustomTabPanel传递子道具：

{item.name}

‍@艾蒂安-我做到了，但没有成功

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;