如何将材质图标添加到数组中并通过道具传递

Question

我正在处理一个带有react、typescript和材质图标的项目

我想把我的材料图标添加到一个数组中，并通过道具传递

但它显示了图标的字母(字符串(

例如，它在浏览器上显示的代码是

export interface IDashboard {
dashboardItems: {
color: string;
count: number;
itemName: string;
icon?: any;
backgroundColor: string;
}[];
}  

仪表板

import { IDashboard as IState } from "../utils/Types";
const Dashboard = () => {
const dashboardItems: IState['dashboardItems'] = [
{
color: "white",
count: 5,
itemName: "Users",
icon: "<GroupIcon />",
backgroundColor: "#373793",
},
];
return (
<DashboardItems dashboardItems={ dashboardItems } />
)
}

仪表板项目

import { IDashboard as IProps} from "../utils/Types";
import GroupIcon from "@material-ui/icons/Group";
const DashboardItems: React.FC<IProps> = ({ dashboardItems }) => {
return (
<div>{dashboardItem.icon}</div>
)}

如何使其显示图标而不是字母(字符串(

Answer 1

在IDashboard中将图标类型更改为JSX.Element而在dashboardItems中，只需从组件icon: <GroupIcon />,中删除撇号。