传入组件的HTML字符串无法渲染为JSX，内置props变量不生效该如何解决？

问题原因 #

你遇到的是两个独立的React渲染特性导致的问题：

1. React默认会对所有插入到JSX的字符串内容做转义处理，避免XSS攻击，因此HTML标签会被直接作为文本输出，不会被解析为DOM节点。
2. 字符串内的{this.props.clientName}属于纯文本内容，不是JSX的动态表达式语法，React不会自动对字符串内部的占位符做变量替换。

具体解决步骤 #

1. 先处理占位符变量替换 #

在渲染HTML之前，先把字符串中的占位符替换为真实的clientName值，示例代码：

// 在子组件中先处理内容字符串
const processedContent = this.props.contents.replace(
  /\{this\.props\.clientName\}/g, 
  this.props.clientName
)

如果有多个需要替换的变量，可以写通用替换逻辑：

const replaceMap = {
  '{this.props.clientName}': this.props.clientName,
  // 其他占位符可以继续按键值对格式添加
}
const processedContent = this.props.contents.replace(
  /\{[^{}]+\}/g, 
  match => replaceMap[match] || match
)

2. 使用dangerouslySetInnerHTML渲染HTML字符串 #

修改子组件的Card.Body渲染逻辑，用React提供的dangerouslySetInnerHTML属性插入处理后的HTML内容：

<Card.Body 
  className="content" 
  dangerouslySetInnerHTML={{ __html: processedContent }}
/>

安全提醒 #

dangerouslySetInnerHTML存在XSS安全风险，请确保你传入的contentsHTML内容来源完全可信，没有包含用户提交的未过滤的恶意代码。

内容的提问来源于stack exchange，提问作者Adam Norton