如何将字符串的一部分更改为 JSX 元素？ [复制]

Posted 2023-02-22

【中文标题】如何将字符串的一部分更改为 JSX 元素？ [复制]

【英文标题】：How to change the part of string into JSX element? [duplicate]

【发布时间】：2021-03-11 12:56:03

【问题描述】：

我有一个字符串，其中有一个<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>
        )
    )

我已经尝试了接受的答案here，唯一的区别是，我使用的是字符串文字 (`)，但它也只能由浏览器作为纯文本读取。

我的预期结果是让<a href="#">here</a> 在浏览器读取它时成为可点击的链接。

【问题讨论】：

目前还不清楚如何你已经尝试了这个公认的答案，因为你没有使用那个 question 做了什么。据我们所知，您目前没有尝试设置 html。

【参考方案1】：

我想，你可以使用div 的dangerouslySetInnerHTML 属性。例如：

const renderDatas = () => 
    return datas.map(data => 
        return (
            <div dangerouslySetInnerHTML= __html: data.description  />
        )
    )

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