如何通过React.useState结合React.createElement动态切换组件？

核心问题 #

你当前的错误在于：React.createElement的第一个参数要求传入组件的引用（函数/类组件本身），但你存在state里的是组件名称的字符串（比如"Dashboard"），字符串无法被识别为React组件，所以渲染失败。

修复步骤 #

1. 调整State存储类型 #

把navigationItem的初始值从字符串"Dashboard"改成对应的Dashboard组件本身：

// Main.tsx
import Dashboard from './path/to/Dashboard'; // 导入目标组件
import { authNavigation } from './navigation';

const Main = () => {
  // 直接存储组件引用，而非字符串
  const [navigationItem, setNavigationItem] = React.useState(Dashboard);
  
  // ...其他逻辑代码
}

2. 修改点击事件处理逻辑 #

点击侧边栏项时，不要存储navTitle字符串，而是取出配置项里的componentId（组件引用）赋值给state：

const handleNavigationOnclick = (navItem) => {
  // 直接设置组件引用，而非字符串
  setNavigationItem(navItem.componentId);
}

3. 修正组件渲染代码 #

现在state里存的是组件本身，直接渲染即可，两种写法都可行：

// 写法1：使用React.createElement
{navigationItem && React.createElement(navigationItem)}

// 写法2：更简洁的JSX语法（推荐，注意组件首字母需大写，此处navigationItem对应大写开头的组件）
{navigationItem && <navigationItem />}

补充：navigation.tsx的配置示例参考 #

确保你的authNavigation数组里的componentId是组件的直接引用，而非字符串：

// navigation.tsx
import Dashboard from './Dashboard';
import UserList from './UserList';
import Settings from './Settings';

export const authNavigation = [
  {
    navTitle: "Dashboard",
    componentId: Dashboard, // 此处是组件本身，不是字符串
    // 其他配置项：icon、path等
  },
  {
    navTitle: "用户列表",
    componentId: UserList,
  },
  {
    navTitle: "设置",
    componentId: Settings,
  }
]

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