如何在反應中使用.map 渲染 JSX 數組

Question

我有一組如下所示的對象：

const features = [
{
        name: "Sponsor Block",
        images: [sponsorBlock1, sponsorBlock2],
        data: [
            `Uses the API found ${<a href='example.com/'>here</a>}. You can find more information on how it works`,
            "Lorem ipsum ........"
        ],
    },
]

在第一點你可以看到我正在使用模板字符串來注入 JSX（我不確定這是否是正確的方法）

我想 map （循環）遍歷特征數組並顯示其中帶有錨標記的第一個點，以及其他只是文本的點作為普通文本。

但是當我遍歷第一個 object 中的數據鍵時，我將其顯示在我的 JSX-> [Object][Object] 中

有沒有辦法解決這個問題，同時仍將其保留在數組中？

Answer 1

為什么不只是一個片段組件數組

data:[
    <>Uses the API found <a href='example.com/'>here</a>. You can find more information on how it works</>,
    <>Lorem ipsum ........</>
]

然后當你渲染時：

return (
    <ul>
        {features.data.map((d,i)=><li key={i}>{d}</li>}
    </ul>
)

Answer 2

const features = [ { name: "Sponsor Block", images: [sponsorBlock1, sponsorBlock2], data: [ `Uses the API found <a href='example.com/'>here</a>. You can find more information on how it works`, "Lorem ipsum ........" ], }, ] features.map(feature => { return <div dangerouslySetInnerHTML={{ __html: feature.data }} /> })