反應動態組件類型示例

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

在這里閱讀更多問題答案