如何在ReactJs前端集成/使用Camunda BPMN Model API来编辑BPMN图

Question

我正在开发一个React Python/Flask应用程序，该应用程序从用户&通过python脚本将其转换为bpmn文件，然后可以通过flackapi在用户设备上下载。我正在开发react UI。现在我必须编辑图表&对它们应用一些可视化。那么我如何在我的应用程序中使用Camunda BPMN Model API呢。我是Camunda&我已经和React文档一起浏览了Camunda，但我仍然对从哪里或如何开始感到困惑。感谢您的帮助。非常感谢。

Answer 1

我不是Camunda BPMN的专业人员，但我现在正在研究它。你在找BPMN.js库吗？以下是BPMN Modeler的示例：https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeler

这就是如何将库与React集成，基本上，您所需要的只是从React提供ref。

const containerRef = useRef();
useEffect(() => {
const bpmnViewer = new BpmnJS({ container: containerRef.current });
}, []);

JSX模板：

<div ref={containerRef}></div>

此处的示例：https://github.com/bpmn-io/react-bpmn/blob/master/src/index.jsx#L25