[英]React TS - How to map through FontAwesome icons and display them
我正在尝试创建一个可重用的组件,它允许我传入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
提前感谢您的任何帮助!
所以,我认为问题在于构建你想要传递的道具。
例如,我们将传递一个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>
);
有一个带有图标名称的字符串列表,如果需要列表,请使用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;
//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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.