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