Início / coding / Perguntas / 76921711
Accepted
John Doe
Asked: 2023-08-17 20:51:14 +0800 CST

Eu preciso dinamicamente React.createElement usando useState

  • 772

Eu tenho esse código e preciso atualizar o componente usando React.createElement. E estou fazendo isso usando React.useState. Estou com problemas no meu código. Alguém pode me orientar.

A seguir estão os códigos.

Painel de estado de configuração padrão

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

Então, depois de lidar com um clique. Eu tenho um authNavigationarquivo de configuração. Usando isso, estou importando um mapeamento.


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

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

Aqui está a parte que estou usando React.createElement

{navigationItem && React.createElement(navigationItem)}

Main.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>
  );
};

navegação.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,
  },
];

Eu preciso imprimir componente usando {navigationItem && React.createElement(navigationItem)}usingReact.useState

reactjs

1 respostas

  1. Best Answer

    Que tal, em vez de criar reactElement, você pode montá-lo diretamente

    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,
  },
];


    export default function App() {
  const [navigationItem, setNavigationItem] = useState("");

  const Component = useMemo(() => {
    return navigationItem.componentId;
  }, [navigationItem]);

  return (
    <div className="App">

      {authNavigation?.map((item) => (
        <button onClick={() => setNavigationItem(item)}>{item.navTitle}</button>
      ))}

      {navigationItem && <Component />}
    </div>
  );
}
    • 0

relate perguntas