不能将 React Icons 组件用作对象值打字稿

Question

我正在使用 TypeScript 和 React 开发一个个人网站，对于我的页脚，我通过一组对象进行映射，每个对象都有一个 url 属性，以及一个图标属性。 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)"

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

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 Icons 组件用作对象值打字稿

Cant use React Icons component as an object value typescript

reactjs

typescript

react-icons