无法使用 React Icons 组件作为对象值打字稿

Question

我正在使用打字稿和反应开发一个个人网站，对于我的页脚，我通过一组对象进行映射，每个对象都有一个 url 属性以及一个图标属性。Icon 属性应该有多个不同的 React Icon 作为值，以便通过每次迭代，我可以显示不同的 Icon。当我最初在 javascript 中实现此功能时，我的代码运行得很好，但是在将我的代码库切换到 typescript 后，我​​遇到了以下错误：

“解析错误：'>'预期。eslint 'FaGithub'引用一个值，但在这里被用作类型。您的意思是'typeof FaGithub'吗？ts(2749)”

这是我迄今为止的打字稿实现。我尝试删除尖括号，这消除了错误，但在映射数组时无法实际显示图标。我真的很感激任何建议。

const socialIcons: { icon: IconType, url: string }[] = [
    {
        icon: <FaGithub />,
        url: "./"
    },
    {
        icon: <FaLinkedin />,
        url: "./"
    },
    {
        icon: <FaTwitter />,
        url: "./"
    },
    {
        icon: <FaInstagram />,
        url: "./"
    },
    {
        icon: <FaFacebook />,
        url: "./"
    },
]

{socialIcons.map((icons, index) => {
                    const {icon, url} = icons;
                    return (
                        <a href={url} key={index} target="_blank" rel="noopener noreferrer">
                            {icon}
                        </a>
                    );
                })}

这就是 SocialIcons 数组最初在常规 javascript 中的样子。

const socialIcons = [
    {
        icon: <FaGithub />,
        url: "./"
    },
    {
        icon: <FaLinkedin />,
        url: "./"
    },
    {
        icon: <FaTwitter />,
        url: "./"
    },
    {
        icon: <FaInstagram />,
        url: "./"
    },
    {
        icon: <FaFacebook />,
        url: "./"
    },
]

Answer 1

我找到了一个解决方案，我需要做的就是将文件扩展名从 .ts 更改为 .tsx，并将值的类型设置为 JSX.Element 以将 React 组件作为对象中的值输入，而不会出现打字稿编译器错误。