React中如何解析XML文件并读取其节点内容？

嘿，我来帮你搞定这个XML解析的问题！你当前的代码里用XMLHttpRequest去读取本地上传的文件是不对的——这个API是用来请求网络资源的，处理本地文件应该用浏览器自带的FileReader API。下面我一步步给你修正代码，教你怎么正确读取上传的XML并解析其中的节点内容。

第一步：修正表单提交逻辑 #

首先，咱们把你的handleSubmit函数改成用FileReader来读取文件内容，而不是XMLHttpRequest：

handleSubmit(event) {
  event.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
  const file = this.App.files[0];
  if (!file) return; // 如果没有选择文件，直接返回

  const reader = new FileReader();
  reader.onload = (e) => {
    const xmlString = e.target.result;
    // 这里调用XML解析函数
    this.parseXML(xmlString);
  };
  reader.readAsText(file); // 以文本形式读取文件
}

第二步：解析XML字符串为DOM对象 #

接下来，咱们写一个parseXML函数，用浏览器的DOMParser把XML字符串转换成可操作的DOM对象：

parseXML(xmlString) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlString, "text/xml");

  // 检查解析是否出错
  const parseError = xmlDoc.querySelector("parsererror");
  if (parseError) {
    alert("XML解析出错了，请检查文件格式！");
    return;
  }

  // 现在可以开始访问XML里的节点了，下面给你几个示例
  this.extractDataFromXML(xmlDoc);
}

第三步：读取XML中的具体字段 #

最后，咱们写一个extractDataFromXML函数，演示如何获取你XML里的各种节点和属性：

extractDataFromXML(xmlDoc) {
  // 示例1：获取DEVICE节点的Name属性
  const deviceNode = xmlDoc.querySelector("DEVICE");
  const deviceName = deviceNode.getAttribute("Name");
  console.log("设备名称：", deviceName); // 输出 "Performa"

  // 示例2：获取所有BG节点的Val属性（血糖值）
  const bgNodes = xmlDoc.querySelectorAll("BGDATA BG");
  const bgValues = Array.from(bgNodes).map(node => node.getAttribute("Val"));
  console.log("所有血糖值：", bgValues); // 输出 ["226", "149", "101", ...]

  // 示例3：获取STATISTIC里的ST_MBG（平均血糖值）
  const mbgNode = xmlDoc.querySelector("STATISTIC ST_MBG");
  const mbgValue = mbgNode.getAttribute("Val");
  console.log("平均血糖值：", mbgValue); // 输出 "189"
}

完整的组件示例（整合以上代码） #

把这些逻辑整合到你的React组件里，完整代码大概是这样：

class FileUploadComponent extends React.Component {
  constructor(props) {
    super(props);
    this.App = null; // 用来存储input的引用
    this.handleSubmit = this.handleSubmit.bind(this);
    this.parseXML = this.parseXML.bind(this);
    this.extractDataFromXML = this.extractDataFromXML.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const file = this.App.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      const xmlString = e.target.result;
      this.parseXML(xmlString);
    };
    reader.readAsText(file);
  }

  parseXML(xmlString) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlString, "text/xml");

    const parseError = xmlDoc.querySelector("parsererror");
    if (parseError) {
      alert("XML解析出错，请检查文件格式！");
      return;
    }

    this.extractDataFromXML(xmlDoc);
  }

  extractDataFromXML(xmlDoc) {
    // 获取DEVICE的Name
    const deviceName = xmlDoc.querySelector("DEVICE").getAttribute("Name");
    alert(`设备名称：${deviceName}`);

    // 获取所有血糖值
    const bgValues = Array.from(xmlDoc.querySelectorAll("BGDATA BG")).map(node => node.getAttribute("Val"));
    console.log("所有血糖数据：", bgValues);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={input => { this.App = input; }} accept=".xml" /> {/* 添加accept限制只选XML文件 */}
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

几个小提示：

• 我给input加了accept=".xml"属性，这样用户只能选择XML文件，更友好
• 记得在构造函数里绑定所有的方法，避免this指向问题
• 解析后可以用querySelector、querySelectorAll或者getElementsByTagName等DOM方法来查找节点，和操作HTML DOM几乎一样

这样你就能轻松读取XML里的任何字段啦！

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