React props：在JSX动态内容中使用HTML实体吗？

Question

我有一个React组件，我想为其道具分配一个包含JavaScript变量和HTML实体的字符串。

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

有没有办法让HTML实体在分配给React道具的JSX动态内容块中呈现为未转义？

尝试了

尝试使用模板文字：

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

问题：在渲染的输出中，–字面被渲染为“ –”而不是“ –”。

---

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

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

问题：这在编译时失败，出现语法错误。

---

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

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

问题：这可行，但是我宁愿避免<span />渲染输出中存在多余的元素。

---

尝试将HTML实体替换为Unicode数字字符引用：

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

问题：

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

Answer 1

您可避免多余的span了Fragment：

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

这个功能是在React 16.2中引入的。

请参阅文档

我同意@samanime的观点，即在简单的情况下，最好使用实际字符，但是如果您的内容是真正动态的，我宁愿使用或方法Fragment也不使用。entityToChardangerouslySetInnerHTML

Answer 2

以下是一些选项（我不久前在更一般的答案中概述了这些选项）：

1. 最简单-使用Unicode

   <MyPanel title={ `${name} – ${description}` } />
   

2. 更安全-在Javascript字符串中为实体使用Unicode数字。

   <MyPanel title={`${name} \u2013 ${description}`} />
   

   要么

   <MyPanel title={`${name} ${String.fromCharCode(8211)} ${description}`} />
   

3. 不得已-使用dragonallySetInnerHTML插入原始HTML。

   title={`${name} – ${description}`}
   

   与：

   <div dangerouslySetInnerHTML={{__html: props.title}}></div>
   

<MyPanel title={ `${name} – ${description}` } />

<MyPanel title={`${name} \u2013 ${description}`} />