在react中使用import CodeMirror from ‘@uiw/react-codemirror’;import xmlFormat from ‘xml-formatter’;，怎么才能获取到每个标签

在React中，使用`CodeMirror`库来编辑XML，并通过`xmlFormatter`对XML内容格式化后，你可以通过监听`CodeMirror`组件的事件或者在其API的帮助下来获取每个标签。以下是基本步骤：

1. 首先，你需要创建一个`CodeMirror`实例并配置它以处理XML文件。例如：

import React, { useRef } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import xmlFormat from 'xml-formatter';

const Editor = () => {
  const codeRef = useRef(null);

  // 初始化CodeMirror，设置适当的模式、选项等
  const editorOptions = {
    mode: 'text/xml',
    lineNumbers: true,
    theme: 'neo',
    onChange: (content) => {
      const formattedContent = xmlFormat(content);
      codeRef.current.setDoc(formattedContent); // 更新显示的内容
    },
  };

  return (
    <CodeMirror ref={codeRef} value={yourInitialXmlContent} options={editorOptions} />
  );
};

2. 在`onChange`函数中，当编辑区域的内容变化时，`formattedContent`变量会包含格式化的XML字符串。你可以遍历这个字符串，使用正则表达式或者解析库如`DOMParser`来提取每个标签。

   const extractTags = (xmlString) => {
     const parser = new DOMParser();
     const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
     const nodes = xmlDoc.getElementsByTagName('*'); // 获取所有标签节点
     return Array.from(nodes).map(node => node.tagName);
   };
   
   // 调用extractTags并在需要的地方使用结果
   const tagList = extractTags(codeRef.current.getValue());

3. 如果你需要实时更新，可以将`extractTags`方法绑定到`CodeMirror`的`change`或者其他适合的事件上。