React中应使用DOMParser解析XML字符串再递归生成JSX元素，以安全保留结构、属性和命名空间；需捕获parsererror错误，并区分ELEMENT_NODE与TEXT_NODE处理。
React 中直接渲染 XML 字符串会触发警告甚至被转义
React 默认把 JSX 里插入的字符串当作纯文本处理，dangerouslySetInnerHTML 是唯一能绕过转义、让浏览器解析 XML 标签的方式，但必须手动确保内容安全。XML 不是 HTML，没有内置语义，React 也不会帮你解析节点结构或绑定事件。
用 DOMParser 解析 XML 字符串再递归生成 JSX 元素
这是最可控的做法：把原始 XML 字符串转成 DOM 节点树，再遍历生成对应的 React 元素。适用于需要保留属性、嵌套结构、命名空间（如 xmlns）的场景。
-
DOMParser在现代浏览器中稳定支持，Node.js 环境需额外引入jsdom - 注意捕获解析错误：
parser.parseFromString(xmlStr, "application/xml")返回的文档若含parsererror元素，说明 XML 格式非法 - 递归时需区分
node.nodeType === Node.ELEMENT_NODE和Node.TEXT_NODE，跳过注释和 CDATA - 属性需用
element.getAttribute(name)读取，不能直接访问element.props
function xmlToJsx(xmlStr) {
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
if (doc.querySelector("parsererror")) {
throw new Error("Invalid XML: " + doc.querySelector("parsererror").textContent);
}
const traverse = (node) => {
if (node.nodeType === Node.TEXT_NODE) {
return node.textContent.trim() ? node.textContent : null;
}
if (node.nodeType !== Node.ELEMENT_NODE) return null;
const props = {};
for (let i = 0; i < node.attributes.length; i++) {
const attr = node.attributes[i];
props[attr.name] = attr.value;
}
const children = Array.from(node.childNodes).map(traverse).filter(Boolean);
return React.createElement(node.tagName, props, ...children);
};
return traverse(doc.documentElement);
}
简单 XML 展示场景可用 highlight.js + pre 渲染为高亮代码块
如果只是「展示」XML（比如调试日志、配置预览），不需交互或数据提取，硬解析反而过度。用 highlight.js 支持 xml 语言高亮更轻量、更安全。
- 避免 XSS 风险：先用
DOMPurify.sanitize()或正则粗筛掉 script 标签（仅当 XML 来源不可信时） - 注意
highlight.js的xml语言定义不支持 DTD 或处理指令，复杂 XML 可能高亮异常 - 设置
whiteSpace: "pre"和overflowX: "auto"保证格式对齐与横向滚动
服务端已转成 JSON 就别再传 XML 字符串到 React 前端
常见反模式：后端返回 XML，前端用 fetchedXml 再 parse —— 这多一次解析、多一层错误可能、还浪费带宽。只要业务逻辑不依赖 XML 特性（如命名空间、处理指令、注释），应在服务端统一转成标准 JSON。
立即学习“前端免费学习笔记（深入）”；
- XML → JSON 转换库如
xml2js（Node.js）或fast-xml-parser（支持浏览器）可处理多数情况 - 注意数组歧义：单个子元素 vs 多个同名子元素，
xml2js默认行为可能把单个也包成数组，需配explicitArray: false - 转换后字段名大小写、下划线风格应与前端约定一致，避免 JSX 里写
data["user-name"]这类非标准访问
XML 在 React 里不是“第一公民”，它要么被当成字符串安全展示，要么被拆解成结构化数据。强行在 JSX 层保留 XML 形态，后期维护成本远高于初期省的那几行代码。
