如何将字符串部分更改为JSX元素？

Question

我有一个字符串，其中有一个<a> text </a>标签，但当它显示在 ReactJS 的元素内时，浏览器只是将其读取为纯文本，这是我的示例代码const datas = [    {        title: 'the title1',        description: `the link was in <a href="#">here</a>, please click`    },    {        title: 'the title2',        description: `the link was in the last <a href="#">word</a>`    }]const renderDatas = () => {    return datas.map(data => {        return (            <div>                {data.description}            </div>        )    })}我已经在这里尝试了接受的答案，唯一的区别是，我使用的是字符串文字（`），但它也只能由浏览器以纯文本形式读取。我的预期结果是当浏览器读取它时使其成为<a href="#">here</a>可点击的链接。

Answer 1

我认为，您可以使用 的angerouslySetInnerHTML属性div。例如：

const renderDatas = () => {

    return datas.map(data => {

        return (

            <div dangerouslySetInnerHTML={{ __html: data.description }} />

        )

    })

}

但是，请注意，正如文档所述：一般来说，从代码设置 HTML 是有风险的，因为很容易无意中使用户遭受跨站点脚本 (XSS) 攻击。