React中如何为%name%这类特殊占位符设置CSS斜体、加粗等样式

你遇到的情况是React默认的防XSS机制导致的，所有字符串内的HTML标签都会被转义为普通文本，所以直接把带<span>的字符串插入JSX不会被解析成DOM节点，可根据你的使用场景选择以下方案解决：

方案1：静态文本直接拆分JSX（最推荐） #

如果这段文本是你自己在代码里写的静态内容，不需要动态拼接，直接拆分写JSX即可：

<div>
  my name is <span className="placeholder">%name%</span>
</div>

对应CSS样式：

.placeholder {
  font-style: italic;
}

方案2：动态文本拆分渲染（安全通用） #

如果文本是动态获取的（比如来自后端接口、配置文件），可以写个简单的拆分逻辑，避免直接注入HTML：

// 封装可复用的占位符格式化组件
function PlaceholderText({ content, placeholder = "%name%" }) {
  const fragment = [];
  const textArr = content.split(placeholder);
  
  textArr.forEach((text, index) => {
    fragment.push(text);
    if (index !== textArr.length - 1) {
      fragment.push(
        <span key={index} style={{ fontStyle: "italic" }}>
          {placeholder}
        </span>
      );
    }
  });

  return <>{fragment}</>;
}

// 调用示例
<div>
  <PlaceholderText content="my name is %name%" />
</div>

方案3：强制HTML解析（仅适用于完全可控的文本） #

如果你100%确定这段文本的来源是安全的、不会被注入恶意脚本，可以用React提供的dangerouslySetInnerHTML API强制解析HTML：

<div
  dangerouslySetInnerHTML={{
    __html: 'my name is <span style="font-style: italic">%name%</span>',
  }}
/>

⚠ 注意：该方法存在XSS跨站脚本攻击风险，非必要不推荐使用。

内容的提问来源于stack exchange，提问作者Fay Chen