1

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

“解析错误：'>' expected.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: "./"
    },
]
4

1 回答 1

0

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

于 2021-09-29T17:10:16.287 回答