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

Question

我正在尝试将 Bpmn Modeler 集成到我的 React 应用程序中，但到目前为止还没有成功。它似乎可以与我在另一个线程中找到的查看器示例一起使用，但是对于建模器，我不能。任何人都可以帮助我或指出正确的方向吗？

这是我在 codeandbox 上的示例代码：https://codesandbox.io/s/j398qkv0zv，这是此示例中的内容https://github.com/bpmn-io/bpmn-js-examples/tree/大师/模型师

谢谢

Answer 1

希望还不算太晚。请检查下面的codesndbox，https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js

Answer 2

将bpmn-js与react结合使用并不难，我在最新版本的react中做了一个功能组件版本的modeler + 自定义属性面板。

你可以在这里找到它https://github.com/bpmn-io/react-bpmn

function App() {  
  const container = useRef(null);
  const [ modeler, setModeler ] = useState(null)

  let modelerInstance = null

  useEffect(() => {
    if (modelerInstance) return

    modelerInstance = new Modeler({
      container: container.current,
      moddleExtensions: {
        custom: customModdleExtension
      },
      keyboard: {
        bindTo: document.body
      }
    });
    modelerInstance
      .importXML(diagramXML)
      .then(({ warnings }) => {
        if (warnings.length) {
          console.warn(warnings);
        }
  
        modelerInstance
          .get("canvas")
          .zoom("fit-viewport");
      });  

    setModeler(modelerInstance)

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

  const handleExport = () => {
    modeler.saveXML({ format: true }).then(({ xml, error }) => {
      if (error) {
        console.error(error);
        return;
      }

      console.log('UPDATE XML:', xml)
    });
  }

  return (
    <div className="modeler-parent">
      <div id="modeler-container" ref={container}></div>
      <div id="properties-container">
        <button onClick={handleExport}>Export BPMN</button>
        {modeler && 
          <PropertiesView modeler={ modeler } />
        }
      </div>
    </div>
  );
}

export default App;