React.js中JSX条件渲染十进制符号编码不生效如何解决？

失效原因 #

你写的HTML实体编码无法生效是因为JSX的{}内为JavaScript执行上下文，HTML实体是HTML语法范畴的规则，在JS字符串中不会被自动解析为对应符号，会直接输出编码原文。

可用解决方案 #

• 方案1：直接使用原生Unicode符号（最推荐，写法最简单直观，只要项目文件编码为UTF-8即可正常工作）
  代码示例：

<div>{exists ? '✓' : '✕'}</div>

• 方案2：使用JS Unicode转义序列（兼容性最优，无需担心文件编码/编辑器字符渲染问题）
  对号✓对应Unicode转义为\u2713，叉号✕对应转义为\u2715，代码示例：

<div>{exists ? '\u2713' : '\u2715'}</div>

• 方案3：使用dangerouslySetInnerHTML渲染HTML实体（仅在必须使用实体编码的场景下选择，注意该属性存在XSS注入风险，动态内容需先做安全转义）
  代码示例：

<div dangerouslySetInnerHTML={{ __html: exists ? '&#10003;' : '&#10005;' }} />

内容的提问来源于stack exchange，提问作者Bryan Enid