如何在ReactJS中将特定标签转换为JSX元素（不使用dangerouslyInnerHTML）

如果你不想用dangerouslyInnerHTML，可以根据HTML结构的复杂度选择以下几种方案：

1. 手动解析（适合简单HTML结构） #

如果你的HTML只有少量固定标签（比如示例里的<p>），可以自己写个简单的解析函数，拆分字符串并转换为JSX。

针对你的示例数据<p>some paragraph</p>.this is strong&lt;/strong，先处理转义字符，再拆分内容转换：

function parseSimpleHtml(htmlStr) {
  // 解码HTML转义字符，比如把&lt;转为<
  const decodedStr = htmlStr.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  // 匹配<p>标签内的内容
  const pTagMatch = decodedStr.match(/<p>(.*?)<\/p>/);
  // 提取标签外的剩余文本
  const restText = decodedStr.replace(/<p>.*?<\/p>/, '');
  
  return (
    <>
      {/* 转换<p>标签为JSX */}
      {pTagMatch && <p>{pTagMatch[1]}</p>}
      {/* 渲染剩余文本 */}
      {restText}
    </>
  );
}

// 组件中使用
const apiData = '<p>some paragraph</p>.this is strong&lt;/strong';
export default function App() {
  return parseSimpleHtml(apiData);
}

2. 使用HTML解析库（适合复杂HTML结构） #

如果HTML结构多样、嵌套复杂，可以用html-react-parser这类库直接将HTML字符串转为JSX，无需dangerouslyInnerHTML。

安装依赖 #

npm install html-react-parser

基础使用 #

import parse from 'html-react-parser';

const apiData = '<p>some paragraph</p>.this is strong&lt;/strong';

export default function App() {
  // 先解码转义字符，再解析为JSX
  const decodedData = apiData.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  return <>{parse(decodedData)}</>;
}

替换特定标签为自定义组件 #

如果需要把特定HTML标签换成自定义React组件，比如将<p>替换为带样式的自定义段落组件：

import parse, { domToReact } from 'html-react-parser';

// 自定义段落组件
const CustomParagraph = ({ children }) => (
  <p style={{ color: '#2c3e50', fontSize: '16px' }}>{children}</p>
);

// 配置替换规则
const parseOptions = {
  replace: ({ name, children }) => {
    // 匹配p标签，替换为自定义组件
    if (name === 'p') {
      return <CustomParagraph>{domToReact(children, parseOptions)}</CustomParagraph>;
    }
  }
};

export default function App() {
  const decodedData = apiData.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  return <>{parse(decodedData, parseOptions)}</>;
}

3. 自定义DOM解析（高度可控场景） #

如果需要完全控制每个标签的转换逻辑，可以用浏览器原生的DOMParser解析HTML为DOM节点，再递归转换为JSX。

function htmlToJsx(htmlStr) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlStr, 'text/html');
  
  // 递归转换DOM节点为JSX
  const convertNode = (node) => {
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      return node.textContent;
    }
    // 处理元素节点
    if (node.nodeType === Node.ELEMENT_NODE) {
      const TagName = node.tagName.toLowerCase();
      // 可在这里自定义标签映射，比如替换特定标签为组件
      // const TagName = node.tagName.toLowerCase() === 'p' ? CustomParagraph : node.tagName.toLowerCase();
      const children = Array.from(node.childNodes).map(convertNode);
      return <TagName>{children}</TagName>;
    }
    return null;
  };

  return Array.from(doc.body.childNodes).map(convertNode);
}

// 组件中使用
const apiData = '<p>some paragraph</p>.this is strong&lt;/strong';
export default function App() {
  const decodedData = apiData.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  return <>{htmlToJsx(decodedData)}</>;
}

内容的提问来源于stack exchange，提问作者pranoy sarker