如何在React组件Props的JSX动态内容中正确渲染HTML实体？

嘿，刚好碰到过类似的坑！React默认会转义JSX里的字符串内容，所以直接传带HTML实体的模板字符串会被当成字面量输出。这里有几个靠谱的解决办法，你可以根据自己的场景选：

1. 直接用Unicode字符替代HTML实体 #

这是最省心的方案，把HTML实体换成对应的Unicode字符就行。比如–对应的就是实际的短破折号–，直接写在字符串里，React会正常渲染：

const ProfileCard = ({ title }) => <h2>{title}</h2>;

// 使用示例
const userName = "Jon";
const cardTitle = `${userName} – 个人主页`; // 直接写入Unicode破折号

<ProfileCard title={cardTitle} />

这个方法零额外处理，也没有安全风险，适合那些你能直接输入对应字符的场景。

2. 使用dangerouslySetInnerHTML（谨慎使用） #

如果必须用HTML实体字符串（比如内容是后端接口返回的），可以用React提供的dangerouslySetInnerHTML属性。但一定要注意：只有当你完全信任这段内容时才用，因为它会直接解析HTML，可能带来XSS攻击风险。

const InfoLabel = ({ htmlContent }) => (
  <span dangerouslySetInnerHTML={{ __html: htmlContent }} />
);

// 使用示例
const itemName = "React组件";
const labelContent = `${itemName} &ndash; 进阶用法`;

<InfoLabel htmlContent={labelContent} />

这里的__html是React要求的固定格式，把你的字符串传进去，组件就会自动解析HTML实体了。

3. 用React元素拼接（最安全的组合方式） #

如果需要把变量和HTML实体结合，又不想碰dangerouslySetInnerHTML，可以直接把它们拼成React元素（用Fragment或者多个元素组合），再把这个元素集合传给Props：

const ActionButton = ({ textContent }) => <button>{textContent}</button>;

// 使用示例
const actionName = "提交";
const buttonContent = (
  <>
    {actionName} <span>&ndash;</span> 确认更改
  </>
);

<ActionButton textContent={buttonContent} />

这种方法既安全，又能灵活组合动态变量和HTML内容，推荐在需要复杂内容组合的时候用。

内容的提问来源于stack exchange，提问作者Jon Schneider