如何将Bpmn-js的Modeler集成到React中

npm install bpmn-js --save

import React, { useEffect, useRef } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';

const BpmnModelerComponent = () => {
  const containerRef = useRef(null);
  let modeler = null;

  useEffect(() => {
    modeler = new BpmnModeler({
      container: containerRef.current
    });

    return () => {
      modeler.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }}></div>;
};

const loadDiagram = async () => {
  const response = await fetch('/path/to/bpmn/file.bpmn');
  const xml = await response.text();

  modeler.importXML(xml, (err) => {
    if (err) {
      console.error('Failed to import BPMN diagram', err);
    } else {
      console.log('BPMN diagram imported successfully');
    }
  });
};

const BpmnModelerComponent = () => {
  // ...

  const handleLoadDiagram = () => {
    loadDiagram();
  };

  return (
    <div>
      <div ref={containerRef} style={{ height: '100vh' }}></div>
      <button onClick={handleLoadDiagram}>Load BPMN Diagram</button>
    </div>
  );
};