html - 如何在导出的 const 中添加 html 元素

Question

我有一个带有大文本的导出常量，在中间我想添加一个超链接元素，但这不起作用。

我的代码：

const myEmail = '<a href="mailto:[e-mail]">[e-mail]</a>'

export const EXAMPLE = `Example of email: ${myEmail}`

我在哪里导入：

import React, { FC } from 'react'
import { EXAMPLE } from '../../constants/ui.constants'

 const Example: FC<{}> = () => {
   return <div>{EXAMPLE}</div>
 }

 export default Example

但这显示如下：

我怎样才能显示这样的电子邮件？（这是通过检查工具编辑的）

标签： htmlreactjstypescript

Answer 1

您可以使用dangerouslySetInnerHTML，但您必须非常确定您注入的任何内容都不是用户可以控制的，否则您将引入 XSS 漏洞。

import React, { FC } from 'react'
import { EXAMPLE } from '../../constants/ui.constants'

const Example: FC<{}> = () => {
    return <div dangerouslySetInnerHTML={EXAMPLE} />
}

export default Example