帮我写一段使用react封装的bpmn查看组件

好的，下面是一个使用 React 封装的 BPMN 查看组件示例：

import React, { useRef, useEffect } from 'react';
import BpmnViewer from 'bpmn-js';

const BpmnViewerComponent = ({ xml }) => {
  const containerRef = useRef(null);
  const viewerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      viewerRef.current = new BpmnViewer({
        container: containerRef.current,
      });
    }
  }, []);

  useEffect(() => {
    if (viewerRef.current) {
      viewerRef.current.importXML(xml, (err) => {
        if (err) {
          console.error('Failed to render BPMN diagram', err);
        } else {
          console.log('BPMN diagram rendered successfully');
        }
      });
    }
  }, [xml]);

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

export default BpmnViewerComponent;

在这个组件中，我们使用了 `bpmn-js` 库来渲染 BPMN 图表。组件接受一个 `xml` 属性，该属性包含 BPMN 图表的 XML 格式数据。组件使用 `useRef` 钩子函数创建了两个引用，一个用于存储渲染 BPMN 图表的容器，另一个用于存储 `bpmn-js` 的 `BpmnViewer` 实例。

在组件的 `useEffect` 钩子函数中，我们首先创建了 `BpmnViewer` 实例并将其存储在 `viewerRef` 中。然后，我们使用 `useEffect` 钩子函数的第二个参数来监听 `xml` 属性的变化。一旦 `xml` 属性发生变化，我们就使用 `viewerRef` 中的 `BpmnViewer` 实例来渲染 BPMN 图表。

最后，我们在组件中返回一个具有 `ref` 属性的 `div` 元素，该属性关联了容器的引用。当组件被渲染时，`useEffect` 钩子函数中的代码会自动执行，从而渲染 BPMN 图表。

使用示例：

import React from 'react';
import BpmnViewerComponent from './BpmnViewerComponent';

const App = () => {
  const xml = '<bpmn:definitions>...</bpmn:definitions>';

  return <BpmnViewerComponent xml={xml} />;
};

export default App;

在这个示例中，我们将 BPMN 图表的 XML 格式数据作为 `xml` 属性传递给 `BpmnViewerComponent` 组件。组件会自动渲染 BPMN 图表。