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

【问题标题】：How do I add material Icons to an array and pass it through props如何将材质图标添加到数组并通过道具传递
【发布时间】：2022-01-05 07:36:07
【问题描述】：

我正在开发一个带有 react、typescript 和 material 图标的项目

我想将我的材质图标添加到一个数组中并通过 props 传递它

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

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

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>
)}

如何让它显示图标而不是字母（字符串）

【问题讨论】：

标签： reactjs typescript react-typescript google-material-icons material-icons

【解决方案1】：

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

【讨论】：

我收到此错误 TS2322：类型 'Element' 不可分配给类型 'FunctionComponent'。
我的错，类型应该是JSX.Element