Javascript 当作为道具传递给另一个组件时，离子图标不显示

在我的

仪表板页面

中，我有一个正在渲染的组件，名为

，我从仪表板页面向它传递了一个对象数组作为道具，每个对象都有一个图标，除了图标之外，所有东西都会被渲染，幸运的是，当我

console.log（）

该图标时，它给了我名称

我不知道怎么了，我输入了错误的图标？用许多图标测试了它<代码>

Dashboard.tsx
进口{
IonBackButton，
离子按钮，
爱雍容，
IonFab，
IonFabButton，
IonHeader，
爱奥尼肯，
爱奥尼门纽顿，
伊恩佩奇，
IonTitle，
IonToolbar，
NavContext，
}从“@离子/反应”；
从“ionicons/icons”导入{addOutline，arrowBackOutline}；
从“反应图标/hi”导入{HiMenuAlt1}；
从“React”导入React，{useContext}；
从“react router”导入{useParams}；
从“../../components/DashHome/DashHome”导入DashHome；
导入“/Dashboard.css”；
从“../../components/DashProfile/DashProfile”导入DashProfile；
从“../../components/DashSettings/DashSettings”导入DashSettings；
从“./NoOfPros/NoOfPros”导入NoOfPros；
从“./Edit/Edit”导入编辑；
从“./草稿/草稿”导入草稿；
导入从“./Converted/Converted”转换而来的数据；
从“./WorkingDays/WorkingDays”导入工作日；
从“./未提交/未提交”导入未提交；
界面仪表板{
标题：字符串；
金额：字符串；
bg：字符串；
链接：字符串；
图标：字符串；
}
常量仪表板：仪表板[]=[
{
标题：“潜在客户数量”，
金额：“200”，
背景：“第一”，
链接：“/dashboard/Prospect”，
图标：“主页”，
},
{
标题：“已转换的潜在客户数量”，
金额：“700”，
背景：“第二”，
链接：“/dashboard/Converted Prospect”，
图标：“列表大纲”，
},
{
标题：“当月工作天数”，
金额：“20”，
背景：“第三”，
链接：“/仪表板/工作日”，
图标：“添加大纲”，
},
{
标题：“未提交的潜在客户”，
金额：“10”，
背景：“第四”，
链接：“/dashboard/未提交的潜在客户”，
图标：“日历大纲”，
},
];
const仪表板：React.FC=（）=>{
const{name}=useParams（）；
const{navigate}=useContext（NavContext）；
常量goToProspect=（）=>{
导航（“/create”、“forward”）；
};
console.log（名称）；
返回(
{name==“Home”(
) : (
)}
{name==“Home”？“你好，John Doe”：name}
{name==“Home”(
)：name==“配置文件”(
)：name==“潜在客户”(
)：name==“设置”(
)：name==“编辑”(
)：name==“草稿”(
)：name==“已转换的潜在客户”(
)：name==“工作日”(
)：name==“未提交的潜在客户”(
) : (
玩偶
)}
{name===“Home”&&(
goToProspect（）}>
)}
);
};
导出默认仪表板；

DashHome.tsx

import React from "react";
import { IonCard, IonCol, IonGrid, IonIcon, IonRow } from "@ionic/react";
import "./DashHome.css";

interface dashboards {
  title: string;
  amount: string;
  bg: string;
  link: string;
  icon: string;
}

type Props = {
  dashboards: dashboards[];
};

const DashHome: React.FC<Props> = ({ dashboards }) => {
  return (
    <div>
      <IonGrid className="dash ion-no-padding">
        <IonRow className="ion-margin-top">
          {dashboards.map((board, idx) => (
            <IonCol size="6" className="ion-no-padding" key={idx}>
              <IonCard href={board.link} className="card" color={board.bg}>
                <div className="ion-margin-bottom ion-margin-top">
                  <IonIcon color="light" icon={board.icon} />
                  {console.log(board.icon)}
                </div>
                <h2 className="card-title">{board.title}</h2>
                <p className="card-text">{board.amount}</p>

                <IonIcon color="light" icon={board.icon} />
              </IonCard>
            </IonCol>
          ))}
        </IonRow>
      </IonGrid>

      <div className="sec-color">
        <p className="ml2 small">Get the most out of your performance</p>
        <IonCard className="card-no-bg bordered">
          <p className="sec-color l-h">5 Pending Prospect..</p>
        </IonCard>
      </div>
    </div>
  );
};

export default DashHome;

从“React”导入React；
从“@ionic/react”导入{IonCard、IonCol、IonGrid、IonIcon、IonRow}；
导入“/DashHome.css”；
界面仪表板{
标题：字符串；
金额：字符串；
bg：字符串；
链接：字符串；
图标：字符串；
}
类型道具={
仪表板：仪表板[]；
};
const DashHome:React.FC=（{dashboards}）=>{
返回(
{dashboards.map（（board，idx）=>(
{console.log（board.icon）}
{董事会名称}
{board.amount}
))}
充分发挥您的性能
5个待定的潜在客户
);
};
导出默认DashHome；

---

问题是如果我做了

，例如，它会工作。

它不应该是

名称

而不是

图标

---

它不应该是

名称

而不是

图标

可能有用

似乎离子图标不喜欢字符串形式的图标。我通过这样做解决了这个问题：

类型图标：字符串，

import { addOutline } from "ionicons/icons";

{
 ...
 icon: addOutline // just as imported instead of in string.
}

可能有用

似乎离子图标不喜欢字符串形式的图标。我通过这样做解决了这个问题：

类型图标：字符串，

import { addOutline } from "ionicons/icons";

{
 ...
 icon: addOutline // just as imported instead of in string.
}

---

名称不起作用，

name

使用Angular对我起作用。我假设React也一样。不，React是React的图标名称不起作用，

name

使用Angular对我有效。我想React也是一样的。不，React是React的图标