如何在反应中使用.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 }} /> })