React TS-如何通过FontAwesome图标进行映射并显示它们

Question

我正在尝试创建一个可重用的组件，该组件允许我传递href，target，rel属性以及我想使用的FontAwesome Icon的类型。我希望能够将尽可能多的图标传递到此列表中，并使用“社交”组件作为模板通过它们进行映射。

我目前有我的职位：

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;

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 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() {
  const list: string[] = ["discord", "facebook", "twitter"];
  return (<div>
    {list.map(name => <Social name={name} />)}
    </div>);
}

更改社交组件。只需添加新的道具，例如name

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

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

对您的沙盒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.
  return (
    <div>
       {/* Your icon list*/}
      {["twitter", "discord"].map(ico => {
        return <Social icon={ico} />;
      })}
    </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;