带有反应的动态离子图标 typescript

Question

我想让我的 IonIcons 动态化，以便它们可以重复使用。 但我需要在 {} 中设置它 我不知道如何使用 a.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} 的 output 有人知道如何解决这个问题吗？

Answer 1

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

const quickOptions = [ { title: "Jouw consulent", icon: 'personOutline' }, ];

<IonIcon icon={element.icon} size="large" />

如果这里的图标类型是{string}，这就是它不起作用的原因
在 quickOptions 中尝试，图标：personOutline 或图标：'personOutline'