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（我不确定这是否是正确的方法）

我想在features数组上进行映射（循环），并在其中显示带有anchor标签的第一个点，而其他仅是文本的点就是普通文本。

但是当我遍历第一个对象中的数据键时，将其显示在我的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 }} />
})

如何在反应中使用.map渲染JSX数组

2 个答案: