如何使用 typescript 在 React 中動態創建 JSX 標簽？

Question

我想動態導入反應圖標。

這適用於 Javascript，但我如何將其轉換為 Typescript 而不會出現各種錯誤？

代碼：

import * as ReactIcons from 'react-icons/all';
const getIcon = (icon) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

這是來自 react-icons 的 output 文件，如果有幫助的話：

// node_modules/react-icons/all.d.ts
export * from './fa';
export * from './fa';
export * from './io';
export * from './md';
export * from './ti';
export * from './go';
export * from './fi';
export * from './gi';
export * from './gi';
export * from './gi';

Answer 1

你可以這樣做：

import * as ReactIcons from 'react-icons/all';

type GetIconProps = {
  icon: keyof typeof ReactIcons;
}

const getIcon = ({icon}: GetIconProps) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

// Example
getIcon({icon: keyof typeof ReactIcons})

甚至更短：

const getIcon = ({ icon }: GetIconProps) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

必須說它感覺有點hacky，所以會嘗試直接從 package 導入。