如何在React/TSX中解析含HTML标签的JSON并渲染内容

方法1：使用dangerouslySetInnerHTML（快速实现） #

如果你的JSON内容是完全可控的（无不可信用户输入），可以用React官方提供的这个属性直接渲染HTML字符串，这是最快的实现方式：

import data from './your-data.json';

function ServiceComponent() {
  const service = data[0];
  return (
    <div>
      <img src={service.img} alt="Service banner" />
      {/* 渲染包含HTML标签的字符串 */}
      <div dangerouslySetInnerHTML={{ __html: service.p2 }} />
    </div>
  );
}

export default ServiceComponent;

方法2：解析HTML为React元素（更安全可控） #

不想用dangerouslySetInnerHTML的话，可以手动解析HTML片段，转换成React元素，避免直接插入原生HTML的风险：

import { useEffect, useState } from 'react';
import data from './your-data.json';

function parseHtmlToReact(htmlString: string) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  const linkTag = doc.querySelector('a');
  
  if (!linkTag) return htmlString;
  
  // 将解析出的a标签转为React元素
  return (
    <a 
      className={linkTag.className}
      href={linkTag.href || '#'} // 按需替换实际跳转链接
    >
      {linkTag.textContent}
    </a>
  );
}

function ServiceComponent() {
  const service = data[0];
  const [content, setContent] = useState<string | JSX.Element>(service.p2);

  useEffect(() => {
    setContent(parseHtmlToReact(service.p2));
  }, []);

  return (
    <div>
      <img src={service.img} alt="Service banner" />
      <div>{content}</div>
    </div>
  );
}

export default ServiceComponent;

方法3：修改JSON结构为React友好格式（最优长期方案） #

如果能调整JSON的结构，直接把内容拆分成文本和组件配置，完全规避HTML字符串的问题，更符合React的开发模式：

修改后的JSON：

[{
  "id": "services.html",
  "img": "img/SolutionInnerbananer.jpg",
  "p2": {
    "text": "If it was interested you can buy it ",
    "link": {
      "className": "product1",
      "text": "Buy Now",
      "href": "#" // 替换为实际跳转链接
    }
  }
}]

TSX中直接渲染：

import data from './your-data.json';

// 定义数据类型规范
type ServiceData = {
  id: string;
  img: string;
  p2: {
    text: string;
    link: {
      className: string;
      text: string;
      href: string;
    };
  };
};

function ServiceComponent() {
  const service = data[0] as ServiceData;
  return (
    <div>
      <img src={service.img} alt="Service banner" />
      <div>
        {service.p2.text}
        <a className={service.p2.link.className} href={service.p2.link.href}>
          {service.p2.link.text}
        </a>
      </div>
    </div>
  );
}

export default ServiceComponent;

注意事项 #

• 使用dangerouslySetInnerHTML时，必须确保HTML内容可信，禁止渲染用户提交的未知内容，防止XSS攻击。
• 方法3是最安全、最易维护的方案，推荐长期项目使用。

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