时间戳

首页 > 解决方案 > 如何将字符串的一部分更改为 JSX 元素？

javascript - 如何将字符串的一部分更改为 JSX 元素？

问题描述

我有一个字符串，其中有一个<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>成为可点击的链接。

标签： javascripthtmlreactjsjsx

解决方案

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

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

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

推荐阅读