React TS - 如何映射 FontAwesome 圖標並顯示它們

Question

我正在嘗試創建一個可重用的組件，它允許我傳入href 、 target 、 rel屬性以及我想使用的 FontAwesome 圖標類型。 我希望能夠將盡可能多的圖標傳遞到這個列表中，它會使用社交組件作為模板來映射它們。

我希望地圖發生在Social.tsx文件中，然后我可以簡單地將組件添加到我的項目中的任何位置，然后將道具傳遞給它。

像這樣的東西：

<Social
  icons={[
    { icon: "facebook", href: "", target: "", rel: "" },
    { icon: "twitter", href: "", target: "", rel: "" },
    { icon: "discord", href: "", target: "", rel: "" }
  ]}
/>

我目前有我的組件：

Social.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as React from "react";

interface ISocial {
  href?: string
  target?: string
  rel?: string
}

const Social: React.FC<ISocial> = (props) => {
  return (
    <div>
      <a href={props.href} target={props.target} rel={props.rel}>
        {/* I don't want to hardcode the icon, but dynamically pass it as a prop */}
        <FontAwesomeIcon icon={["fab", "discord"]} />
      </a>
    </div>
  );
};

export default Social;

應用程序.tsx

import * as React from "react";
import "./styles.css";
import Social from "./components/Social";

export default function App() {
  // I'd like to be able to pass in a list of different icons
  // followed by the href, target, rel, etc for each item.
  // The Social component would be able to map through them
  // and display them.
  return <Social />;

我怎樣才能適應它來做我上面描述的事情？

這是一個CodeSandBox

提前感謝您的任何幫助！

Answer 1

所以，我認為問題在於構建你想要傳遞的道具。

例如，我們將傳遞一個IconProp類型的數組，然后您可以輕松地對其進行映射。

現在你可以制作自己的界面並傳遞這種類型的道具

interface myType {
  href?: string;
  target?: string;
  rel?: string;
  icon: IconProp;
}
const dummyProp: myType[] = [
  { icon: ["fab", "discord"] },
  { icon: ["fab", "discord"] },
  { icon: ["fab", "discord"] },
  { icon: ["fab", "discord"] }
];

const Social: React.FC<ISocial> = props => {
  return (
    <div>
      {dummyProp.map(p => (
        <a href={p.href} target={p.target} rel={p.rel}>
          <FontAwesomeIcon icon={p.icon} />
        </a>
      ))}
    </div>
  );

Answer 2

有一個帶有圖標名稱的字符串列表，如果需要列表，請使用map 。

export default function App() {
  return (
    <Social
      icons={[
        { icon: "facebook", href: "", target: "", rel: "" },
        { icon: "twitter", href: "", target: "", rel: "" },
        { icon: "discord", href: "", target: "", rel: "" }
      ]}
    />
  );
}

社會成分的變化。 只需添加新的道具，如name

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as React from "react";
import { IconName } from "@fortawesome/fontawesome-svg-core";

interface ISocial {
  href?: string;
  target?: string;
  rel?: string;
  icon: IconName;
}

interface ISocialList {
  icons: Array<ISocial>;
}

const Social: React.FC<ISocialList> = props => {
  const { icons } = props;
  return (
    <div>
      {icons.map(item => {
        return (
          <a href={item.href} target={item.target} rel={item.rel}>
            <FontAwesomeIcon icon={["fab", item.icon]} />
          </a>
        );
      })}
    </div>
  );
};

export default Social;

對您的沙箱的代碼更改https://codesandbox.io/s/headless-bush-br14l

Answer 3

 //App.tsx import * as React from "react"; import "./styles.css"; import Social from "./components/Social"; export default function App() { // I'd like to be able to pass in a list of different icons // followed by the href, target, rel, etc for each one. // The Social component would be able to map through them // and display them. const iconList = [ { name: "twitter", href: "https://www.google.com", target: "_blank" }, { name: "discord", href: "https://www.google.com", target: "_blank" } ]; return ( <div> {iconList.map(ico => { return <Social icon={ico.name} href={ico.href} />; })} </div> ); } //Social.tsx import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as React from "react"; interface ISocial { href?: string; target?: string; rel?: string; icon: String; } const Social: React.FC<ISocial> = props => { return ( <div> <a href={props.href} target={props.target} rel={props.rel}> <FontAwesomeIcon icon={["fab", props.icon]} /> </a> </div> ); }; export default Social;