小编Bra*_*ady的帖子

我正在使用打字稿和反应开发一个个人网站，对于我的页脚，我通过一组对象进行映射，每个对象都有一个 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} …

我的行为与顺风任意值功能确实不一致，特别是与转换延迟属性有关。当我直接在任意值中使用任何随机值时，它适用于我迄今为止测试过的每个值（随机正整数）。前任...

<li className="delay-[2455]">{some text}</li>

但如果我要使用变量，该类只会偶尔根据值产生任何影响，看似随机。前任...

const delay = "250ms";
return <li className={`delay-[${delay}]}`></li>

上面的这段将产生一个有效的类，但下面的段将没有效果并且不会产生有效的类

const delay = "500ms";
return <li className={`delay-[${delay}]}`></li>

我不确定这是否是我做错了，或者是顺风中的一些奇怪的怪癖。我对任何建议持开放态度。如果有什么不同的话，我将打字稿与反应结合使用。我正在使用 tailwindcss 版本 3.0.11 和 postcss 版本 8.4.5 这些是我的 tailwind.config.js 和 postcss.config.js 文件

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        'xsm': '428px',
        '2xsm': '360'
      },
      fontFamily: {
        title: ['Patrick Hand'],
        body: ['Balsamiq Sans']
      },
      transitionProperty: {
        'opacity': 'opacity',
      },
    },
  },
  plugins: [],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }, …