带有反应打字稿的动态离子图标答案

【问题标题】：dynamic ionic icon with react typescript带有反应打字稿的动态离子图标
【发布时间】：2022-11-29 20:00:35
【问题描述】：

我想让我的 IonIcons 动态化，以便它们可以重复使用。但我需要在 {} 中设置它我不知道如何使用 .map() 元素执行此操作。

import React from "react";
import { IonIcon, IonLabel } from "@ionic/react";
import styles from "./quickOptions.module.css";
import { alarmOutline, personOutline, cartOutline } from "ionicons/icons";

export default function quichOptions() {
  const quickOptions = [
    { title: "Jouw consulent", icon: { personOutline } },
    { title: "Jouw afspraken", icon: { alarmOutline } },
    { title: "Jouw bestellingen", icon: { cartOutline } },
  ];

  return (
    <div className={styles.mainContainer}>
      {quickOptions?.map((element: any) => {
        return (
          <div key={element.title} className={styles.btnContainer}>
            <IonLabel>{element.title}</IonLabel>
            <IonIcon icon={element.icon} size="large" /> //here
          </div>
        );
      })}
    </div>
  );
}

Element.icon 不提供 {personOutline} 的输出，例如有人知道如何解决这个问题吗？

【问题讨论】：

您的图标键必须具有字符串值。例如icon: 'icon-name-outline'

标签： reactjs typescript ionic-framework array.prototype.map

【解决方案1】：

你可以检查 console.log(typeof element.icon)

const quickOptions = [ { title: "Jouw consulent", icon: 'personOutline' }, ];
<IonIcon icon={element.icon} size="large" />
如果这里的图标类型是{string}，这就是它不起作用的原因
在 quickOptions 中尝试，图标：personOutline 或图标：'personOutline'

【讨论】：

是的，我看到了。我的愚蠢错误。