我正在开发一个 React-Python/Flask 应用程序，该应用程序从用户获取输入 bpmn 图图像并通过 python 脚本将其转换为 bpmn 文件，然后可以通过用户设备上的 flask api 下载该文件。我正在研究反应 UI。现在我必须编辑图表并对其应用一些可视化。那么如何在我的应用程序中集成 yFiles for html BPMN 编辑器。我已经从 yworks.com 下载了它的评估包，并在演示之后将该包集成到 React 中。但现在我被困住了，因为没有太多专门针对 yFiles 的教程可用。当我搜索它时，我发现了很多 bpmn.js 的 react 教程。请帮我解决一下。我是 yFiles 的新手，我查看了 yFiles 评估包教程，但我仍然不知道如何做出反应。此外，由于客户的要求，我只能使用 yFiles。感谢您的任何帮助。
1 回答
1
yFiles for HTML不是一个 React 组件——事实上它是一个纯 JavaScript 组件，它不基于任何第三方框架甚至软件。
这并不意味着您不能将它集成到 React、Angular 或 Vue.js 或任何其他行为良好的 JavaScript 客户端框架中。事实上，yFiles 已被构建为支持与所有这些框架的集成，如果它不能与特定框架一起使用，这通常表明存在缺陷，或者更有可能是第三方框架中的错误，而不是 yFiles！毕竟 yFiles 就是这样：管理 HTML5 DOM 的一部分的纯 JavaScript（准确地说是一个 div 元素及其所有子元素），几行 CSS，其余的只是 JavaScript。如果您的 UI 库可以提供这些基本要求（当然 React 也可以），那么 yFiles 可以与该框架一起运行。
正如你所说，有这些不同的集成示例可用，展示了如何集成第三方框架和 yFiles（两者都是 yFiles 作为“客户端”以及托管由这些第三方框架创建和维护的 DOM 片段的 yFiles：https:// github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit
对于 React，实际上在 GitHub 上有一个额外的 repo（它不是评估包的一部分）：https ://github.com/yWorks/yfiles-react-integration-basic
React 对应用程序或组件的工作方式非常固执己见。yFiles 不遵循 React 方法（老实说，我相信如果这样做将是一个坏主意），但您构建的组件可以。这个想法是创建一个自定义的 React 组件，该组件在内部使用 yFiles for HTML 来进行 BPMN 编辑器的可视化、编辑和处理。就像您将一个原生 HTML5 文本区域和两个按钮封装到一个 React 组件中一样，您封装了 yFiles 用来管理 BPMN 可视化和编辑器的“div”。
BPMN 演示不使用 React 。事实上，它使用普通的旧 HTML，并且不使用任何真正的 UI 框架。这意味着您需要（并且可以）获取该代码并将其包装到自定义 React 组件中。使用 yFiles for HTML 的 node 模块版本和 es6 样式的示例代码，这应该不会太难。毕竟它只是 JavaScript 没有任何进一步的依赖。
在 React 的上下文中没有额外的 yFiles 教程。然而，这应该不是什么大问题，因为任何展示如何包装通用 JavaScript 组件或如何从头开始创建新组件的教程都应该适用。
如果您遇到特定问题，请在此处发布您的问题（如果是关于 React）或联系 yWorks 的支持团队，如果您确定这是特定于 yFiles 的问题，而不是一般的 JavaScript 问题。当然，在 yFiles 的情况下 StackOverflow 也可以工作，但是我认为在 StackOverflow 上闲逛的 yFiles 开发人员并不多。无论如何，大多数时候都是我或 yWorks 团队的某个人。
于 2020-02-27T17:39:06.493 回答