反应动态组件类型示例

Question

如何/在哪里可以将类型添加到动态组件Icons[name] ？

import * as Icons from "react-icons/fa";

const DynamicFaIcon = ({ name }: any) => {
  const IconComponent = Icons[name];

  return <IconComponent />;
};

Answer 1

您可以从导入中获取密钥，因为它与其他任何一样都是 JS object：

import * as Icons from "react-icons/fa";

const DynamicFaIcon = ({ name }: {name: keyof typeof Icons}) => {
  const IconComponent = Icons[name];

  return <IconComponent />;
};

不过，我会小心地从 package 中导入所有内容。 那里有超过 1,500 个组件，是否有任何应用程序实际使用了所有这些组件？ 你最终会捆绑比你需要的更多的方式。

Answer 2

这是我对动态图标问题的回答，这是你的问题答案吗？？ ，也许它会帮助你，像这样使用它`

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {library} from '@fortawesome/fontawesome-svg-core';
import * as Icons from '@fortawesome/free-solid-svg-icons';

const iconList = Object.keys(Icons)
    .filter((key) => key !== 'fas' && key !== 'prefix')
    .map((icon) => Icons[icon]);

library.add(...iconList);

const Feature = ({ carFeature }) => {
    console.log(carFeature);
    return (
        <div>
            <FontAwesomeIcon icon={carFeature?.icon} color="#ddd" />
            <h3>{carFeature?.name}</h3>
            <p>{carFeature?.desc}</p>
        </div>
    );
};
export default Feature;

如果没有，那么试试这个

不是 OP 的直接问题，而是对于不受其控制的库遇到此错误的用户，可以通过添加来抑制此错误：

{
  ...
  "suppressImplicitAnyIndexErrors": true,
  ...
}

到 tsconfig.json 文件。

在这里阅读更多问题答案