react如何使用bpmn-js显示bpmn流程图并且高亮当前节点

要在React中使用bpmn-js显示bpmn流程图并高亮当前节点，可以按照以下步骤：

1. 安装依赖库

npm install bpmn-js --save
npm install react-bpmn --save

2. 导入依赖库

import React, { Component } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
import ReactBpmn from 'react-bpmn';

3. 渲染BpmnModeler

class BpmnEditor extends Component {
  constructor(props) {
    super(props);

    this.state = {
      bpmnXML: null,
      activeElement: null,
    };

    this.modeler = null;
  }

  componentDidMount() {
    const { bpmnXML } = this.props;

    // 创建BpmnModeler实例
    this.modeler = new BpmnModeler({
      container: '#canvas',
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
      },
    });

    // 加载BPMN XML
    this.modeler.importXML(bpmnXML, (err) => {
      if (err) {
        console.error(err);
      }
    });

    // 监听当前节点变化
    this.modeler.on('element.changed', (event) => {
      this.setState({
        activeElement: event.element.id,
      });
    });
  }

  componentDidUpdate(prevProps) {
    const { bpmnXML } = this.props;

    if (bpmnXML !== prevProps.bpmnXML) {
      // 重新加载BPMN XML
      this.modeler.importXML(bpmnXML, (err) => {
        if (err) {
          console.error(err);
        }
      });
    }
  }

  render() {
    const { activeElement } = this.state;

    return (
      <div>
        <div id="canvas" style={{ height: '100vh' }} />
        <ReactBpmn
          xml={this.props.bpmnXML}
          activeElement={activeElement}
        />
      </div>
    );
  }
}

在上述代码中，我们首先在 `componentDidMount` 生命周期中创建了一个 `BpmnModeler` 实例，并通过 `importXML` 方法将 BPMN XML 加载到模型器中。然后，我们监听了 `element.changed` 事件，当当前节点发生变化时，更新 `activeElement` 状态。最后，在 `render` 函数中，我们将 `BpmnModeler` 实例渲染到 `<div>` 中，并使用 `react-bpmn` 库渲染当前节点高亮。

4. 在父组件中使用 BpmnEditor

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      bpmnXML: null,
    };
  }

  componentDidMount() {
    // 加载BPMN XML文件
    fetch('/path/to/bpmn.xml')
      .then((response) => response.text())
      .then((xml) => {
        this.setState({
          bpmnXML: xml,
        });
      });
  }

  render() {
    const { bpmnXML } = this.state;

    return (
      <div>
        {bpmnXML && <BpmnEditor bpmnXML={bpmnXML} />}
      </div>
    );
  }
}

在父组件中，我们首先通过 `fetch` 方法加载 BPMN XML 文件，并将其存储在 `state` 中。然后，我们将 `BpmnEditor` 组件渲染到页面上，并将 BPMN XML 作为 `props` 传递给 `BpmnEditor` 组件。