如何從 React-Icon 名稱數組創建 JSX 元素？

Question

import React from "react"
import {GiCard2Spades,GiCard3Spades} from "react-icons/gi"
    
const x = ["GiCard8Spades","GiCard9Spade"]
const y = x.map(item => <item />) //basically to get <GiCard8Spades /> elements
return(<div>{y}</div>)

我知道我可以立即使用 JSX 項目手動創建數組，但在這種情況下需要其他方式。

Answer 1

如果你死心塌地使用字符串，你可以試試

import * as Icons from "react-icons/gi"

const x = ["GiCard8Spades","GiCard9Spade"];
return(<div>{x.map((item) => Icons[item])}</div>)

Answer 2

試試這個方法

    import React from "react"
    import {GiCard2Spades,GiCard3Spades} from "react-icons/gi"
        
    const x = [GiCard8Spades,GiCard9Spade];
    return(<div>{x.map(item => item)}</div>)//basically to get <GiCard8Spades /> elements

這樣，您將創建一個 JSX.Elements 數組，而不是字符串數組

Answer 3

是的，我有點愚蠢，應該使用

import React from "react"
import {GiCard2Spades,GiCard3Spades} from "react-icons/gi"
    
const x = [GiCard8Spades,GiCard9Spades]
const y = x.map(item => React.createElement(item))
return(<div>{y}</div>)