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

我想动态导入

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

代码：

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

你可以这样做：

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})

import*作为“react icons/all”中的react图标；
类型GetIconProps={
图标：图标类型的键；
}
常量getIcon=（{icon}:GetIconProps）=>{
常量标记名=反应图标[图标]；
返回；
};
//范例
getIcon（{icon:keyof typeof ReactIcons}）

甚至更短：

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

const getIcon=（{icon}:GetIconProps）=>{
常量标记名=反应图标[图标]；
返回；
};

---

必须说，它感觉有点黑客，所以我会尝试直接从软件包中导入。

加载所有图标很少是个好主意。

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