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

Question

我正在做一个带有反应、打字稿和材料图标的项目

我想将我的材质图标添加到数组并通过道具传递

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

示例在此代码中，它显示在浏览器上是

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 />,。