React渲染WordPress REST API返回HTML时class属性报错解决方案

原生正确使用dangerouslySetInnerHTML不会触发class属性的报错，出现这个警告的核心原因是：你在渲染流程中，把WordPress返回的HTML字符串交给了React JSX解析逻辑处理（比如用了HTML转React元素的解析库、误将HTML字符串当做JSX节点渲染）。React的JSX语法要求类名属性必须写className，识别到原生HTML的class属性时就会抛出该警告。

根据你的项目场景选对应方案即可：

方案1：优先检查dangerouslySetInnerHTML写法是否正确 #

先确认你的渲染代码没有写错，标准写法如下，这种写法直接插入原生HTML到DOM，不会走React的JSX属性校验，本身不会触发警告：

<div dangerouslySetInnerHTML={{ __html: data.rendered }} />

• 注意：该节点不要嵌套子元素，不要额外绑定会触发React重绘该部分DOM的逻辑，插入的class属性会被浏览器正常识别，无兼容性问题。
• 如果写法完全正确仍然报错，说明项目中存在其他逻辑二次处理了这段HTML，用下面的方案做属性替换即可。

方案2：无依赖正则替换（最简单快速） #

拿到接口返回的rendered字段后，先用正则精准替换标签内的class属性为className，不会误替换正文文本中出现的class单词，覆盖绝大多数WordPress返回内容场景：

// 接口返回数据后先做处理
const safeRenderContent = data.rendered.replace(/\sclass="/g, ' className="')
// 后续渲染用处理后的safeRenderContent即可

方案3：解析库标准化处理（适合复杂内容场景） #

如果返回的HTML结构复杂，除了class之外还有其他和JSX规范不兼容的属性（比如for属性需替换为htmlFor、内联style格式不兼容等），可以用HTML解析库统一转换，灵活性最高：

1. 安装依赖

npm install html-react-parser

2. 编写渲染逻辑

import parse from 'html-react-parser';

// 节点属性替换规则
const replaceAttrs = (node) => {
  if (node.type === 'tag' && node.attribs) {
    // 替换class为className
    if (node.attribs.class) {
      node.attribs.className = node.attribs.class
      delete node.attribs.class
    }
    // 其他属性替换规则可按需扩展，比如替换for为htmlFor
  }
}

// 组件中渲染
<div>
  {parse(data.rendered, { replace: replaceAttrs })}
</div>

这种方式会把HTML字符串解析为标准React元素，完全符合JSX属性规范，不会抛出属性相关警告，还支持按需修改节点属性、绑定交互事件。

内容的提问来源于stack exchange，提问作者Ram Lakhan Jaiswal