javascript - react Prop : Using an HTML entity within JSX dynamic content?

Question

我有一个 React component ，我想为其属性分配一个包含 JavaScript 变量和 HTML 实体的字符串。

我尝试过的一些方法导致 HTML 实体被转义。例如，–逐字呈现为“–”而不是“–”。

有没有办法让 HTML 实体在分配给 React Prop 的 JSX 动态内容 block 中呈现非转义？

尝试次数

尝试使用 template literal :

<MyPanel title={`${name} &ndash; ${description}`}> ... </MyPanel>

问题:在呈现的输出中，–按字面意思呈现为“–”而不是“–”。

---

尝试构建一些不带引号的简单 JSX:

<MyPanel title={{name} &ndash; {description}} ... </MyPanel>

问题:这在编译时因语法错误而失败。

---

尝试通过将 JSX 包装在 <span /> 中来解决语法错误元素:

<MyPanel title={<span>{name} &ndash; {description}</span>} ... </MyPanel>

问题:这可行，但我宁愿避免多余的 <span />元素出现在呈现的输出中。

---

尝试用 Unicode 数字字符引用替换 HTML 实体:

<MyPanel title={name + ' \u2013 ' + description} ... </MyPanel>

问题:

• 这行得通，但是(在我看来)使代码少了一些可读。 (更明显的是“ndash”而不是“2013”代表破折号字符。)
• 此外，这涉及 + -运算符串联，触发 Unexpected string concatenation prefer-template我团队的 JSLint 检查器出错；使用字符串插值的解决方案会更好。

Answer 1

您可以使用 Fragment 避免多余的 span:

<MyPanel title={<>{name} &ndash; {description}</>} ... </MyPanel>

此功能是在 React 16.2 中引入的。

参见 Documentation

---

我同意 @samanime使用实际字符最适合简单的情况，但如果您的内容确实是动态的，我更愿意使用 Fragment 而不是 entityToChar或 dangerouslySetInnerHTML方法。