如何将 material 图标添加到数组并通过 props 传递它

Question

我正在开发一个包含 React、TypeScript 和 material 图标的项目

我想将我的 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>
)}

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

Answer 1

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

如何将 material 图标添加到数组并通过 props 传递它

How do I add material Icons to an array and pass it through props

typescript

reactjs

google-material-icons

react-typescript

material-icons