React 不直接渲染 XML，需先用 DOMParser 或 fast-xml-parser 解析为对象，再通过 JSX 安全渲染；解析与渲染分离，推荐用 useMemo 缓存、递归组件处理嵌套结构，并防范 XSS。

React 本身不直接解析或渲染 XML，需要先将 XML 字符串转换为 JavaScript 对象（如 JSON 或自定义结构），再用 React 组件安全地渲染。关键在于“解析”和“渲染”两步分离：解析靠外部库或原生 DOM API，渲染靠 React 的 JSX 和状态管理。

用 DOMParser 解析 XML 字符串

浏览器原生支持 DOMParser，适合简单、可信的 XML（如本地配置、静态数据）。它把 XML 字符串转成可遍历的 XML 文档对象。

• 创建解析器：const parser = new DOMParser()
• 解析字符串：const xmlDoc = parser.pa

  

  rseFromString(xmlString, 'application/xml')
• 检查错误：if (xmlDoc.querySelector('parsererror')) 可捕获格式错误
• 提取数据：用 xmlDoc.querySelectorAll 或 getElementsByTagName 遍历节点，提取 textContent 或属性

用 xml2js 等库转成 JS 对象（推荐）

对于嵌套深、含属性、需复用逻辑的 XML，xml2js（Node.js 环境）或其浏览器兼容版（如 fast-xml-parser）更可靠。它们把 XML 转成普通 JS 对象，便于 React 状态管理和条件渲染。

• 安装：npm install fast-xml-parser（轻量、无依赖、支持浏览器）
• 解析示例：

  import { parse } from 'fast-xml-parser';
  const result = parse(xmlString, { ignoreAttributes: false });

• 结果是嵌套对象，可直接传给组件或存入 useState

在组件中安全渲染 XML 内容

XML 中的内容可能含特殊字符（如 、&），不能直接用 innerHTML。React 默认会转义字符串，所以用 {text} 即可防 XSS；若需渲染 HTML 标签（如 XML 中的富文本片段），必须明确使用 dangerouslySetInnerHTML，且确保内容已清洗。

• 纯文本内容：直接 {node.text} 或 {node['#text']}
• 带格式的 HTML 片段（谨慎）：{dangerouslySetInnerHTML: { __html: sanitizedHtml }}
• 避免直接渲染未处理的 XML 属性或文本，尤其来自用户输入或第三方接口

封装一个可复用的 XML 渲染组件

把解析与渲染逻辑解耦，提升可维护性。例如写一个 XmlViewer 组件，接收 XML 字符串，内部解析并递归渲染节点：

• 用 useMemo 缓存解析结果，避免重复解析
• 用递归函数处理嵌套结构（如 B）
• 对不同标签名（title、desc）返回对应样式或语义元素（h3、p）
• 添加加载态和错误提示，提升用户体验