我有一組資料，如下所示：
export const links = [
{
name: 'Facebook',
url: 'https://facebook.com',
icon: 'SiFacebook',
},
/* ... rest of it */
]
然后，對于這些icon名稱中的每一個，我都有一個組件（它實際上是一個使用React Icons 的圖示，例如，我會渲染：
<SiFacebook />
因此，在我將其映射到我的頁面后，我需要呈現如下內容：
{links.map((link: any, index: any) => (
<li
key={index}
className="w-60 rounded-md bg-neutral-focus grid grid-cols-1 p-3 mx-2"
>
{React.createElement(`${link.icon}` ,{})}
<a
href={link.url}
target="_blank"
rel="_noreferrer"
className="text-sm font-bold"
>
{link.name}
</a>
</li>
))}
所以我需要將每個渲染link.icon為一個組件。我嘗試使用React.createElement但它沒有用。其他方法也行不通。我究竟做錯了什么？
uj5u.com熱心網友回復：
這是不可能的，因為您還需要根據 react icon docs 匯入圖示 -->https://react-icons.github.io/react-icons/在您嘗試渲染的位置，另一種更好的方法是像這樣從陣列中將圖示作為組件發送
import { FaBeer } from 'react-icons/fa';
export const links = [
{
name: 'Facebook',
url: 'https://facebook.com',
icon: <FaBeer />,
},
/* ... rest of it */
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373316.html
標籤：javascript 数组 反应 打字稿 反应组件