时间戳

首页 > 解决方案 > 如何使用 typescript 在 React 中动态创建 JSX 标签？

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

问题描述

我想动态导入反应图标。

这适用于 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';

标签： reactjstypescriptdynamicimportreact-icons

解决方案

你可以这样做：

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

推荐阅读