如何将字符串部分更改为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) 攻击。