如何正确渲染React中分配给变量的html实体？

Question

在React中，下面的代码正确地将双引号（“）渲染到页面：

export default Character() {
  return (
    <p>&quot;</p> // renders as the symbol "
  )
}

但是，如果将 HTML 实体分配给变量，则该实体将显示为字符串：

export default Character() {

  const char = """

  return (
    <p>{char}</p> // renders as a the string "&quot;"
  )
}

有人可以向我解释一下为什么这两种实现会导致不同的行为吗？

非常感谢！

Answer 1

以下内容被视为 HTML 内容，并在渲染之前由 HTML 进行处理。

<p>&quot;</p>

当您使用字符串引用（在 React 中）设置它时，字符串中符号的预处理会以某种方式被忽略。

<p>{char}</p>

如果你有一个带有 HTML Symbols 的字符串，你可以在 React 中使用

dangerouslySetInnerHTML

属性来解决这个问题。

<p dangerouslySetInnerHTML={{ __html: char }} />

为了避免 XSS，请使用 sanitize-html 清理字符串。

1. 安装包

npm i sanitize-html

2. 只需像下面这样使用它

import sanitizeHtml from 'sanitize-html';
...
...
<p dangerouslySetInnerHTML={{ __html: sanitizeHtml("your-text<script src=""></script>") }} />

忽略

script

部分，输出将为 =>“your-text”。

代码沙箱

Answer 2

您可以使用

<>fragment</>

export default Character() {

  const char = <>&quot;</>

  return (
    <p>{char}</p>
  )
}