如何在 object 中存储 React 组件

Question

I have an object of all apps:

 export const allApps: appInterface[] = [
  {
    id: uuidv4(),
    name: "Minesweeper",
    icon: minesweeperIcon,
    disabled: false,
  },
];

I want to add component property to each object like this:

 export const allApps: appInterface[] = [
  {
    id: uuidv4(),
    name: "Minesweeper",
    icon: minesweeperIcon,
    disabled: false,
    component: Minesweeper, //It is imported as import Minesweeper from ../Components/Minesweeper";
  },
];

And then I want to display all components in App.js:

allApps.forEach((app)=>{
  <div>{app.component}<div> // for eg: <div><Minesweeper/></div>
});

Is this possible to do?

Answer 1

Try as below code it should work.

allApps.map((app)=>{
const { component: Component } = app;
  return <Component />;
});