JSX.Element 作為接口 TS 中的道具

Question

我有一個組件接口，它應該以 JSX.Element 作為道具，我通常如何做到這一點？ 現在我使用 ReactNode，但是當我嘗試顯示圖標時它不起作用

export interface firstLevelMenuItem {
  route: string;
  name: string;
  icon: ReactNode;
}

import { Courses, Books, Products, Services } from "@/components/UI";
const firstLevelMenu: firstLevelMenuItem[] = [
  {
    route: "courses",
    name: "Курсы",
    icon: Courses,
  },
];

const buildFirstLevel = (): JSX.Element => {
    return (
      <>
        {firstLevelMenu &&
          firstLevelMenu.map((el) => (
            <div key={el.route}>
              <a href={`/${el.route}`}>
                <div
                  className={cn(styles.firstLevel, {
                    [styles.firstLevelActive]: el.id == firstCategory,
                  })}
                >
                  {el.icon} // doesn't show
                  <span>{el.name}</span>
                </div>
              </a>
            </div>
          ))}
      </>
    );
  };

圖標組件示例：

const Courses = (): JSX.Element => {
  return (
    // some svg
  );
};

export default Courses;

Answer 1

您正在嘗試呈現函數 (?) Courses或其他任何內容。 如果要將其呈現為 JSX 元素，則必須將其編寫為 JSX 元素：

const firstLevelMenu: firstLevelMenuItem[] = [
  {
    route: "courses",
    name: "Курсы",
    icon: <Courses />,
  },
];

或者，在渲染代碼中將其渲染為 JSX 元素：

firstLevelMenu.map((el) => (
    const Icon = el.icon;
    <div key={el.route}>
        <a href={`/${el.route}`}>
        <div
            className={cn(styles.firstLevel, {
            [styles.firstLevelActive]: el.id == firstCategory,
            })}
        >
            <Icon />
            <span>{el.name}</span>
        </div>
        </a>
    </div>
))}