如何在 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"。

Code Sandbox