ReactJS：如何解析JSON元素中的JSX变量？style.header无法转换求助

这个问题我之前也碰到过，核心原因是html-react-parser没法直接识别字符串里的JS变量引用——你从JSON里拿到的{style.header}只是纯文本内容，不是真正的style.header变量引用，所以解析后元素的className会变成字符串"{style.header}"，而不是CSS Modules生成的实际类名。

下面给你两个可行的解决思路：

方案一：提前替换字符串中的类名（简单直接） #

既然JSON内容是字符串，我们可以在解析前先把{style.header}替换成style.header对应的实际类名字符串：

import style from './theme/style.css';
import Parser from 'html-react-parser';

let html = myJsonValue;
// 把字符串里的"{style.header}"替换为实际的类名
const processedHtml = html.replace('{style.header}', style.header);

render(<div>{Parser(processedHtml)}</div>);

这种方法适合类名固定、数量少的场景，代码简单易维护。

方案二：使用parser的replace选项动态处理（灵活通用） #

如果你的JSON里有多个CSS Modules类名需要处理，或者类名格式不固定，推荐用html-react-parser提供的replace选项，在解析过程中动态替换className：

import style from './theme/style.css';
import Parser from 'html-react-parser';

let html = myJsonValue;

// 自定义替换逻辑
const replaceElement = (node) => {
  // 只处理div标签（你可以根据需要修改标签类型）
  if (node.type === 'tag' && node.name === 'div') {
    const originalClass = node.attribs?.className;
    if (!originalClass) return;

    // 处理单个或多个类名的情况，比如"{style.header} {style.nav}"
    const newClassName = originalClass.split(' ')
      .map(classSegment => {
        // 匹配{style.xxx}格式的字符串
        const match = classSegment.match(/\{style\.(\w+)\}/);
        // 如果匹配成功，返回对应的CSS Modules类名，否则保留原字符串
        return match ? style[match[1]] : classSegment;
      })
      .join(' ');

    // 返回替换后的React元素
    return <div className={newClassName}>{node.children}</div>;
  }
};

render(<div>{Parser(html, { replace: replaceElement })}</div>);

这个方法的优势是扩展性强，不管JSON里有多少个类名，只要符合{style.xxx}的格式，都能自动映射到正确的CSS Modules类名。

额外注意事项 #

• 确保你的CSS Modules配置正确，style.header确实能输出有效的类名字符串（可以在控制台打印style对象确认）；
• 如果JSON里的类名格式有变化（比如大小写、符号不同），需要调整正则表达式或者替换逻辑来匹配。

内容的提问来源于stack exchange，提问作者Amaury Laroze