我需要使用 useState 动态 React.createElement

我有这段代码，我需要使用 React.createElement 更新组件。我正在使用 React.useState 来做到这一点。我的代码有问题。谁能指导我。

以下是代码。

默认设置状态仪表板

  const [navigationItem, setNavigationItem] = React.useState<any>(Dashboard);

然后处理点击后。我有一个配置authNavigation文件。我正在使用它导入映射。

  const handleNavigationOnclick = (item: any) => {
    setNavigationItem(item?.navTitle);
  };

<ListItemButton onClick={() => handleNavigationOnclick(obj)}>
                <ListItemText primary={obj?.navTitle} />
              </ListItemButton>

这是我使用 React.createElement 的部分

{navigationItem && React.createElement(navigationItem)}

主.tsx

import * as React from "react";
import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";

import { authNavigation } from "../../config/navigation";
import Dashboard from "../Dashboard/Dashboard";

const drawerWidth = 240;

const MainComponent = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
  open?: boolean;
}>(({ theme, open }) => ({
  flexGrow: 1,
  padding: theme.spacing(3),
  transition: theme.transitions.create("margin", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  marginLeft: `-${drawerWidth}px`,
  ...(open && {
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  }),
}));

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme, open }) => ({
  transition: theme.transitions.create(["margin", "width"], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: `${drawerWidth}px`,
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar,
  justifyContent: "flex-end",
}));

export const Main = () => {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const [navigationItem, setNavigationItem] = React.useState<any>("Dashboard");

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const handleNavigationOnclick = (item: any) => {
    setNavigationItem(item?.navTitle);
  };

  console.log("navigationItem =>", navigationItem);

  return (
    <Box sx={{ display: "flex" }}>
      <CssBaseline />
      <AppBar position="fixed" open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            Persistent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          "& .MuiDrawer-paper": {
            width: drawerWidth,
            boxSizing: "border-box",
          },
        }}
        variant="persistent"
        anchor="left"
        open={open}
      >
        <DrawerHeader>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === "ltr" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
          </IconButton>
        </DrawerHeader>
        <Divider />
        <List>
          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
            <ListItem key={text} disablePadding>
              <ListItemButton>
                <ListItemText primary={text} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {authNavigation.map((obj, i) => (
            <ListItem key={i} disablePadding>
              <ListItemButton onClick={() => handleNavigationOnclick(obj)}>
                <ListItemText primary={obj?.navTitle} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Drawer>
      <MainComponent open={open}>
        <DrawerHeader />
        {navigationItem && React.createElement(navigationItem)}
      </MainComponent>
    </Box>
  );
};

导航.tsx

import Register from "../Layouts/Register/Register";
import Users from "../Layouts/Users/Users";

export const authNavigation = [
  {
    id: "register",
    navTitle: "Register",
    title: "Register",
    componentId: Register,
  },
  {
    id: "users",
    navTitle: "Users",
    title: "Users",
    componentId: Users,
  },
];

我需要使用 {navigationItem && React.createElement(navigationItem)}以下方式打印组件React.useState