如何使用 typescript 在 React 中动态创建 JSX 标签？

Question

我想动态导入反应图标。

这在 Javascript 中有效，但是我如何将其转换为 Typescript 而不会出现各种错误？

代码：

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

如果有帮助的话，这是来自react-icons的.d.ts文件的输出：

// 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，所以会尝试直接从包导入。