如何使用React.js将XML数据解析并渲染为列表

核心思路 #

浏览器原生提供DOMParser接口可以直接解析XML格式字符串，不需要额外引入第三方依赖，适合你给出的这类简单XML结构的解析场景，如果后续有复杂XML解析需求也可以替换为xml-js等第三方库。

具体实现步骤 #

• 封装XML解析函数，从XML字符串中提取所有product节点的属性和文本内容
• 在React组件中调用解析函数，将解析后的数据存到state中
• 遍历解析后的数据渲染列表

完整代码示例 #

import { useState, useEffect } from 'react';

// 你的XML示例数据
const xmlData = `
<Item>
    <product product-id="638" is-retired="false">Auto</product>
    <product product-id="777" is-retired="true">test</product>
</Item>
`;

// 解析XML的工具函数
const parseProductXml = (xmlStr) => {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
  // 检查解析错误
  const parseError = xmlDoc.querySelector('parsererror');
  if (parseError) {
    console.error('XML解析失败', parseError.textContent);
    return [];
  }
  // 提取所有product节点
  const productNodes = xmlDoc.querySelectorAll('product');
  return Array.from(productNodes).map(node => ({
    productId: node.getAttribute('product-id'),
    isRetired: node.getAttribute('is-retired') === 'true',
    name: node.textContent.trim()
  }));
};

function ProductList() {
  const [productList, setProductList] = useState([]);

  useEffect(() => {
    // 解析XML并更新state
    const products = parseProductXml(xmlData);
    setProductList(products);
  }, []);

  return (
    <div className="product-list">
      <h3>产品列表</h3>
      <ul>
        {productList.map(product => (
          <li key={product.productId}>
            产品名称：{product.name} / 产品ID：{product.productId} / 是否已停用：{product.isRetired ? '是' : '否'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

注意事项 #

如果XML是从后端接口异步获取的，把xmlData替换为接口返回的XML字符串即可，解析逻辑不需要改动，上述代码已经内置了XML解析错误校验，出现格式错误时会在控制台打印错误信息，返回空数组避免渲染报错。

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