如何将字符串转为React组件？动态路由渲染报错求助

问题背景 #

需要从数据库读取组件名字符串（如'HomePage'），动态渲染成对应的React组件用于路由，但直接使用React.createElement(componentString, {})时出现错误：

Tag is unrecognized in this browser If you meant to render a React component, start its name with an uppercase letter.

核心原因 #

React的createElement第一个参数需要传入组件的实际引用，而非字符串。直接传字符串会被React当成原生HTML标签处理，自然找不到对应标签，因此报错。

解决方法 #

建立组件名称到组件引用的映射表，通过字符串从映射表中获取真实组件后再渲染：

步骤1：导入所有需要的组件 #

确保已导入所有可能用到的页面组件：

import HomePage from './HomePage';
import ArchitecturePage from './ArchitecturePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';

步骤2：创建组件映射表 #

用对象存储组件名字符串与对应组件的映射关系：

const componentMap = {
  HomePage: HomePage,
  ArchitecturePage: ArchitecturePage,
  AboutPage: AboutPage,
  ContactPage: ContactPage
};

步骤3：修改转换函数 #

从映射表中获取组件后再创建元素：

function ConvertStringToComponent(componentString: string) {
  const Component = componentMap[componentString];
  // 可选：处理不存在的组件，避免报错
  if (!Component) {
    return <div>组件不存在</div>;
  }
  return <Component />;
}

完整修改后的代码 #

import React from 'react';
import { Link, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import ArchitecturePage from './ArchitecturePage';
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';

// 假设navClassNames是已定义的样式类
const navClassNames = '你的导航样式类';

const componentMap = {
  HomePage: HomePage,
  ArchitecturePage: ArchitecturePage,
  AboutPage: AboutPage,
  ContactPage: ContactPage
};

function ConvertStringToComponent(componentString: string) {
  const Component = componentMap[componentString];
  if (!Component) {
    return <div>组件不存在</div>;
  }
  return <Component />;
}

function App() {
  let listOfNavElements = [
    {
      path: "/",
      element: ConvertStringToComponent('HomePage'),
      name: "Home"
    },
    {
      path: '/architecture',
      element: <ArchitecturePage></ArchitecturePage>,
      name: "Architecture"
    },
    {
      path: '/About',
      element: <AboutPage></AboutPage>,
      name: "About"
    },
    {
      path: '/contact',
      element: <ContactPage></ContactPage>,
      name: "Contact"
    }
  ];

  return (
    <>
      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
            <div className="flex flex-shrink-0 items-center"></div>
            <div className="hidden sm:ml-6 sm:block">
              <div className="flex space-x-4">
                {listOfNavElements.map((page, index) => (
                  <Link key={index} to={page.path} className={navClassNames}>{page.name}</Link>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <Routes>
        {listOfNavElements.map((page, index) => (
          <Route key={index} path={page.path} element={page.element}></Route>
        ))}
      </Routes>
    </>
  );
}

export default App;

补充说明 #

• 给map循环的元素加上key属性，避免React警告
• 后续新增组件时，只需在componentMap中添加对应键值对即可
• 转换函数中加入错误处理，防止传入不存在的组件名称导致崩溃

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