reactjs - 不能将 React Icons 组件用作对象值 typescript

Question

我正在使用 typescript 和 react 开发一个个人网站，对于我的页脚，我正在映射一组对象，每个对象都有一个 url 属性和一个 icon 属性。 Icon 属性应该有多个不同的 React Icons 作为值，这样通过每次迭代，我可以显示一个不同的 Icon。当我最初用 javascript 实现它时，我的代码工作得很好，但是在将我的代码库切换到 typescript 之后，我遇到了这个错误:

"Parsing error: '>' expected.eslint'FaGithub' refers to a value, but is being used as a type here. Did you mean 'typeof FaGithub'?ts(2749)"

这是我到目前为止的 typescript 实现。我试过删除尖括号，这消除了错误，但在通过数组映射时我无法实际显示图标。如果有任何建议，我将不胜感激。

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 组件作为对象中的值输入，而不会出现 typescript 编译器错误.