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;

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

Иметь список строк с именами значков и использовать 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 2

//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;

Answer 3

Итак, я думаю, проблема в том, чтобы структурировать реквизиты, которые вы хотите передать.

Например, мы передадим массив типа 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>
  );