一直在尋找一種在我的組件中正確呈現圖示的方法，但最終出現標題錯誤。
Profile.tsx:
<ul>
{socialLinks.map((socialLink) => (
<li key={socialLink.href}>
<a href={socialLink.href}>{socialLink.icon}</a>
</li>
))}
</ul>
data.ts
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
export const socialLinks = [
{
name: "github",
href: "#",
icon: FaGithub,
},
{
name: "twitter",
href: "#",
icon: FaTwitter,
},
{
name: "discord",
href: "#",
icon: FaDiscord,
},
];
有沒有辦法來解決這個問題？
uj5u.com熱心網友回復：
是icon一個功能組件。你必須呼叫它。
或者，直接在資料配置中呼叫它：
{ icon: <FaGithub />, name: ..., href: ... }
或映射時：
{socialLinks.map((socialLink) => {
const Icon = socialLink.icon;
return (
<li key={socialLink.href}>
<a href={socialLink.href}>
<Icon />
</a>
</li>
);
))}
uj5u.com熱心網友回復：
您應該能夠將 重新分配socialLinks.icon給一個新變數，然后將其呈現為 tsx 檔案中的 React 組件。我相信以下應該有效：
<ul>
{socialLinks.map((socialLink) => {
const Icon = socialLink.icon
return (
<li key={socialLink.href}>
<a href={socialLink.href}><Icon/></a>
</li>
))}}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/524781.html
標籤：反应打字稿