如何在ReactJS中使用react-html-parser时避免自定义组件大小写被修改

问题根因 #

react-html-parser 底层依赖浏览器原生 HTML 解析器实现字符串转换，而原生 HTML 解析规则会强制将所有标签名转为小写，因此你的自定义组件 <MyParagraph> 会被转换为 <myparagraph>，不符合 React 官方要求的「自定义组件必须首字母大写」的渲染规则，会被识别为原生 HTML 标签导致无法正常渲染。 #

解决方案 1：使用 react-html-parser 内置 transform 回调映射组件 #

你可以通过库自带的 transform 配置项，手动将解析后得到的小写标签名映射回对应的大写自定义组件，示例代码如下：

import ReactHtmlParser from "react-html-parser";
// 提前引入你的自定义组件
import MyParagraph from "./MyParagraph";

// 定义组件映射表：key为解析后得到的小写标签名，value为对应的自定义组件
const customCompMap = {
  myparagraph: MyParagraph
};

function StrToJSX() {
  const rawJSX = `
    <h1> Hello World! </h1>
    <MyParagraph> I am a programmer. </MyParagraph>
  `;

  return ReactHtmlParser(rawJSX, {
    transform: (node, index) => {
      // 仅处理元素节点
      if (node.type !== "tag") return;
      // 匹配映射表中的自定义组件
      const TargetComp = customCompMap[node.name];
      if (TargetComp) {
        // 返回对应自定义组件，透传属性和子节点
        return (
          <TargetComp key={index} {...node.attribs}>
            {ReactHtmlParser(node.children)}
          </TargetComp>
        );
      }
    }
  });
}

如果自定义组件数量较多，可以统一导出所有组件后自动生成映射表，无需手动逐个配置：

// 统一导出自定义组件的文件 customComponents.js
export { default as MyParagraph } from "./MyParagraph";
export { default as MyButton } from "./MyButton";
export { default as MyCard } from "./MyCard";

// 业务代码中自动生成映射表
import * as AllCustomComps from "./customComponents";
const customCompMap = Object.fromEntries(
  Object.entries(AllCustomComps).map(([compName, comp]) => [compName.toLowerCase(), comp])
);

解决方案 2：切换为支持保留标签大小写的解析库 #

react-html-parser 本身是为解析普通 HTML 设计的，如果你需要频繁处理带自定义组件的 JSX 字符串，可以切换为 html-react-parser，该库支持关闭标签自动转小写的配置，示例代码如下：

import parse from "html-react-parser";
import MyParagraph from "./MyParagraph";

const parseOptions = {
  lowerCaseTags: false, // 关闭标签自动转小写逻辑
  replace: (domNode) => {
    // 直接匹配原大小写的组件名即可
    if (domNode.name === "MyParagraph") {
      return <MyParagraph>{parse(domNode.children)}</MyParagraph>;
    }
  }
};

function StrToJSX() {
  const rawJSX = `
    <h1> Hello World! </h1>
    <MyParagraph> I am a programmer. </MyParagraph>
  `;
  return parse(rawJSX, parseOptions);
}

注意事项 #

两种方案都需要自行处理驼峰属性的映射：比如原生 HTML 解析会把 React 规范的 className 属性转为 class，你需要在 transform/replace 逻辑中手动将属性名转为符合 React 规范的驼峰格式再透传给组件。

内容的提问来源于stack exchange，提问作者Deepanshu Yadav