React道具：在JSX动态内容中使用HTML实体？
我有一个React组件，我想为其指定一个字符串，其中包含JavaScript变量和HTML实体。
我尝试过的一些方法导致HTML实体被转义。 例如， – 从字面上将其渲染为“ – ”而不是“ – ”。
有没有办法让一个HTML实体在被分配给React道具的JSX动态内容块中进行非转义渲染？
尝试
尝试使用模板文字：
<MyPanel title={`${name} – ${description}`}> ... </MyPanel>
问题：在渲染输出中， – 被逐字地表示为“ – ”而不是“ – ”。
试图构建一些不带引号的简单JSX：
<MyPanel title={{name} – {description}} ... </MyPanel>
问题：编译时出现语法错误，失败。
尝试通过将JSX包装在<span />元素中解决语法错误：
<MyPanel title={<span>{name} – {description}</span>} ... </MyPanel>
问题：这是有效的，但我宁愿避免呈现输出中存在多余的<span />元素。
尝试用Unicode数字字符引用替换HTML实体：
<MyPanel title={name + ' u2013 ' + description} ... </MyPanel>
问题：
+连接，这会在我的团队的JSLint检查器中触发Unexpected string concatenation prefer-template错误; 一个使用字符串插值的解决方案会更好。 您可以通过Fragment避免多余的span ：
<MyPanel title={<>{name} – {description}</>} ... </MyPanel>
这个特性是在React 16.2中引入的。
请参阅文档
我同意@samanime使用实际的字符最适合简单的情况，但如果你的内容是真正动态的，我宁愿使用Fragment覆盖entityToChar或dangerouslySetInnerHTML的entityToChar方法。
这里是React关于HTML实体的文档：JSX Gotchas
其中，使用实际的字符而不是HTML实体将是最好的：
<MyPanel title={ `${name} – ${description}` } />
如果你不能这样做，因为HTML实体是动态的（它不仅仅是一个硬编码的连字符），你可以翻译实体。 这是一个小功能，可以做到这一点：
const entityToChar = str => {
const textarea = document.createElement('textarea');
textarea.innerHTML = str;
return textarea.value;
}
然后，您可以像这样使用它：
<MyPanel title={ entityToChar(`${name} – ${description}`) } />
这里有几个选项（我在后面更概括地回答了这些问题）：
最简单 - 使用Unicode
<MyPanel title={ `${name} – ${description}` } />
更安全 - 使用Unicode字符串中的实体的Unicode编号。
<MyPanel title={`${name} u2013 ${description}`} />
要么
<MyPanel title={`${name} ${String.fromCharCode(8211)} ${description}`} />
Last Resort - 使用dangerouslySetInnerHTML插入原始HTML。
title={`${name} – ${description}`}
有：
<div dangerouslySetInnerHTML={{__html: props.title}}></div>
const MyPanel = (props) => {
return (
<div>{props.title}</div>
)
}
const MyPanelwithDangerousHTML = (props) => {
return (
<div dangerouslySetInnerHTML={{__html: props.title}}></div>
)
}
var description = "description";
var name = "name";
ReactDOM.render(<MyPanel title={`${name} – ${description}`} />
, document.getElementById("option1"));
ReactDOM.render(<MyPanel title={`${name} u2013 ${description}`} />
, document.getElementById("option2"));
ReactDOM.render(<MyPanel title={`${name} ${String.fromCharCode(8211)} ${description}`} />
, document.getElementById("option3"));
ReactDOM.render(<MyPanelwithDangerousHTML title={`${name} – ${description}`} />
, document.getElementById("option4"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>上一篇: React props: Using an HTML entity within JSX dynamic content?
下一篇: React JSX: Access Props in Quotes in a Maped component list