如何在对象中存储React组件

Question

我有一个所有应用程序的对象：

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

我想向每个对象添加组件属性，如下所示：

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

然后我想在App.js:中显示所有组件

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

这样做可能吗？

Answer 1

按照下面的代码尝试它应该可以工作。

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