React TSX组件Props中HTML标签不生效的问题求解

算力阿峰

2026-6-18

解决TSX中HTML标签无法生效的问题

你遇到的问题是因为React默认会对字符串内容做转义处理，<strong>这类HTML标签会被当成普通文本渲染，不会解析成对应的页面元素。以下是不同场景的解决方法：

场景1：自定义组件（自己开发的myComponent）

如果myComponent是你自己写的，修改组件内部的渲染逻辑，用dangerouslySetInnerHTML解析HTML字符串：

// 组件定义
interface MyComponentProps {
  contents: string;
}

function MyComponent({ contents }: MyComponentProps) {
  return <div dangerouslySetInnerHTML={{ __html: contents }} />;
}

场景2：第三方组件

如果myComponent是第三方库提供的，先查组件文档看是否有支持HTML渲染的专属属性（比如htmlContent）。如果没有，就用容器元素包裹，通过dangerouslySetInnerHTML渲染内容：

<MyComponent>
  <div dangerouslySetInnerHTML={{ __html: `<strong>example</strong>` }} />
</MyComponent>

更安全的推荐方案

尽量避免直接传递HTML字符串，改用React元素传递，既符合React设计思路，又能避免安全风险：

// 使用组件时直接传React元素
<MyComponent contents={<strong>example</strong>} />

// 组件定义时接收ReactNode类型
interface MyComponentProps {
  contents: React.ReactNode;
}

function MyComponent({ contents }: MyComponentProps) {
  return <div>{contents}</div>;
}