动态组件类型示例

Question

如何/在哪里向动态组件Icons[name]添加类型？

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

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

  return <IconComponent />;
};

​

​

Answer 1

您可以从导入中抓取键，因为它和其他任何对象一样是JS对象：

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

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

  return <IconComponent />;
};

不过，我会小心地从这个包中导入所有的东西。里面有1500多个组件，有什么应用程序可以使用所有这些组件吗？你最终会比你需要更多的捆绑。

Answer 2

这是我对dynamic icons问题的回答，是你的问题答案吗?？，也许它会对你有帮助，像这样使用它

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文件。

在这里阅读更多Question Answer