React中如何将数据库返回的字符串转为对象属性的JSX元素？

核心问题原因 #

直接用数据库返回的字符串作为组件名渲染<Element/>会报错，因为React的JSX要求组件是可调用的函数/类组件引用，而不是字符串类型，TypeScript会因类型不匹配抛出JSX element type 'Element' does not have any construct or call signatures错误。

无第三方库解决方案 #

1. 创建组件映射表 #

先导入所有需要用到的组件，再创建一个对象，将数据库返回的字符串名称与实际组件做一一映射：

// 导入项目中用到的页面组件
import Settings from './components/Settings';
import Dashboard from './components/Dashboard';
// 其他需要的组件按需导入...

// 组件映射表：键对应数据库返回的componentName字符串，值是组件引用
const ComponentMap = {
  Settings,
  Dashboard,
  // 后续新增组件时，在这里补充对应关系即可
} as const;

2. 修正类型定义 #

更新MenuNavigation类型，让componentName只能是映射表中的合法键值，保证类型安全：

// 提取映射表的键作为合法组件名类型
type ComponentName = keyof typeof ComponentMap;

export type MenuNavigation = {
  pageId: string;
  pageLabel: string;
  url?: string | null;
  order?: string | null;
  componentName?: ComponentName | null; // 替换原有的string类型，限制为合法组件名
  listSubMenu: MenuNavigation[] | null;
};

3. 修改菜单处理逻辑 #

在map函数中从映射表获取对应组件，再渲染为JSX.Element：

const flattenMenuItems = flattenMenu(nonContextualisedMenu)
  .filter((navItem) => navItem.url !== null && navItem.componentName !== null)
  .map((navItem) => {
    // 从映射表中取出对应的组件引用
    const Element = ComponentMap[navItem.componentName!];
    return {
      path: navItem.url as string,
      element: <Element /> // 现在可正确生成JSX.Element类型
    };
  });

4. 可选：添加错误兜底逻辑 #

如果数据库可能返回未在映射表中定义的字符串，可添加兜底处理避免渲染失败：

const flattenMenuItems = flattenMenu(nonContextualisedMenu)
  .filter((navItem) => navItem.url !== null && navItem.componentName !== null)
  .map((navItem) => {
    const Element = ComponentMap[navItem.componentName as ComponentName];
    // 若未找到对应组件，使用兜底组件或跳过
    if (!Element) {
      console.warn(`未匹配到组件: ${navItem.componentName}`);
      // 可返回一个默认的NotFound组件，或直接过滤掉该条目
    }
    return {
      path: navItem.url as string,
      element: <Element />
    };
  });

方案原理 #

组件映射表相当于把数据库返回的字符串"翻译"成React能识别的组件引用，同时通过TypeScript的类型约束，避免了无效字符串导致的渲染错误，全程无需依赖第三方库。

内容的提问来源于stack exchange，提问作者Amélie Barré