在array map中按名称渲染React Component，Material UI标签页组件不渲染

问题原因 #

• 第一处fetchedCategories.map中定义的Component是块级作用域变量，仅在当前map的回调函数内生效，后续渲染TabPanel的位置无法访问到该变量，这段代码完全无效。
• 你自定义的Component函数逻辑错误：函数直接返回了myComponents[label]也就是组件本身，没有做渲染执行，自然不会输出任何组件内容。
• 额外重复定义的映射逻辑冗余，没有必要单独封装Component函数。

修复方案 #

直接在渲染TabPanel的回调内从myComponents取对应组件，再正常传参渲染即可，修正后代码如下：

渲染部分代码 #

return (
<Box sx={{ width: '100%' }}>
  <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
    <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
    {fetchedCategories.map((category) => (
        <Tab key={category.label} label={category.label} />
      ))}
    </Tabs>
  </Box>
  {fetchedCategories.map((category, index) => {
    // 直接在当前作用域取对应组件
    const RenderComponent = myComponents[category.label];
    return (
      <TabPanel key={category.label} value={value} index={index}>           
        <RenderComponent label={category.label} />
      </TabPanel>
    )
  })}
</Box>
);

配置部分代码可以简化为： #

interface ComponentProps {
    label: string;
    value?: number;
}

// 可以删掉你之前写的自定义Component函数，不需要额外封装
const myComponents: Record<string, React.FC<ComponentProps>> = {
    'Welcome': Welcome,
    'Salad/Soup': Welcome
}

补充说明 #

如果需要保留你之前的自定义Component封装逻辑，只需修改该函数的返回值，把组件正常渲染即可：

function Component (props: ComponentProps)
{
   const {label, ...rest} = props;
   const RenderComp = myComponents[label];
   // 要把组件实例渲染出来，不能直接返回组件本身
   return <RenderComp {...rest} />;
}

内容的提问来源于stack exchange，提问作者karthik