javascript - 为 ReactJS 或 Webpack 问题重写 Javascript 函数?
问题描述
我正在尝试将 draw.io Javascript 源代码嵌入 ReactJS iFrame 以作为概念验证应用程序。我是 Javascript 和 ReactJS 的新手,所以真的只是想弄清楚。我有点卡住了。我有以下结构:
- 图-editor.js ( https://github.com/jgraph/drawio-integration/blob/master/diagram-editor.js )
- 显示.js
显示.js
import React, { Component } from "react";
import DiagramEditor from "./diagram-editor";
class Diagram extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h4>Diagram</h4>
<iframe
src={DiagramEditor}
onclick={DiagramEditor.editElement(this)}
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSItMC41IC0wLjUgMTIxIDYxIiBjb250ZW50PSImbHQ7bXhmaWxlIGV0YWc9JnF1b3Q7VGdBR2JKbGNJaGw3a1JuRGFxSDQmcXVvdDsgYWdlbnQ9JnF1b3Q7TW96aWxsYS81LjAgKE1hY2ludG9zaDsgSW50ZWwgTWFjIE9TIFggMTBfMTRfNikgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzgwLjAuMzk4Ny4xMDYgU2FmYXJpLzUzNy4zNiZxdW90OyBtb2RpZmllZD0mcXVvdDsyMDIwLTAyLTE5VDEyOjQ0OjI3LjY1OVomcXVvdDsgaG9zdD0mcXVvdDt0ZXN0LmRyYXcuaW8mcXVvdDsgdmVyc2lvbj0mcXVvdDtARFJBV0lPLVZFUlNJT05AJnF1b3Q7Jmd0OyZsdDtkaWFncmFtIGlkPSZxdW90O3JVdXh2bWFtZE5aMXpyTFhPbF82JnF1b3Q7IG5hbWU9JnF1b3Q7UGFnZS0xJnF1b3Q7Jmd0O2xaUExic0l3RUVXL0prc2t4Nll0V3dvcGZhaWxLcXFRMkpsNGNGdzVHZVFZU1ByMVRZaWRCeXphcmpJK21VZm1YaWRnczdSWUdMNVBYbEdBRGlnUlJjRG1BYVVocGF4NjFLUnN5VjFEcEZIQ3NRNnMxRGM0U0J3OUtBSDVJTkVpYXF2MlF4aGpsa0ZzQjR3Ymc2ZGgyZzcxY09xZVM3Z0NxNWpyYTdwV3dpWU5uZHlRamorQ2tvbWZIQkwzSnVVKzJZRTg0UUpQUGNTaWdNME1vbTJpdEppQnJ0WHp1cnlGNy9NeFpSK2piRU5pU2FmUlJxcFIwK3poUHlYdENnWXkrOWZXbnptWTVmYXJscFFTemJlVnIrZktsZVhHTmczOTBPeXdIZHVuWTFnc1g5YlBiSWU0THFlamJzUDJJM05iZWxVTkhqSUJkVDBKMkwzVVBNOWQzS3BVSDVvNVJ6QVdpZ3M3ZnRrbDdJMWZBS1pnVFZuVnVTN01lK0p1NWNRZFQ1M0RvVTlKZXU3ZU9zYmRwWkp0NTA2NEtuQWIrMk5QU284NjE4L3B2WitIUlQ4PSZsdDsvZGlhZ3JhbSZndDsmbHQ7L214ZmlsZSZndDsiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48ZGVmcy8+PGc+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI2MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxMnB4Ij48dGV4dCB4PSI1OS41IiB5PSIzNC41Ij5TdGFydDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
style="cursor:pointer;"
/>
</div>
);
}
}
export default Diagram;
来自 diagram-editor.js 的示例函数
DiagramEditor.prototype.getElementData = function(elem) {
var name = elem.nodeName.toLowerCase();
return elem.getAttribute(
name == "svg" ? "content" : name == "img" ? "src" : "data"
);
};
这编译但是我得到以下 Webpack 错误:
Unhandled Rejection (TypeError): _diagram_editor__WEBPACK_IMPORTED_MODULE_7___default.a.editElement is not a function
有任何想法吗?
我需要在 diagram-editor.js 中编辑函数吗?请使用上面的链接,因为它是一个大文件。
提前致谢。
解决方案
推荐阅读
- asp.net - 使用 ajax asp.net 调用 Web 服务
- javascript - 在文本框中显示按钮的值并在javascript中更改所选按钮的颜色
- excel - 选择所有带前缀的工作表,复制和粘贴数据
- javascript - 在 Jest (Vue) 中测试子组件时如何模拟发射
- java - BIRT 每个表的单独页数
- drupal - 嗨,我正在使用 Drupal 9,并且在网络选项卡中的请求 jQuery 3.5.1 发送另一个上下文渲染调用。这个电话有什么原因吗?
- python - 从不同的索引开始'forloop.counter'或在结果中添加一些东西
- r - R函数返回每个值的位置出现的向量?
- javascript - 在 React 中,我需要从本地存储中获取状态,然后根据该状态有条件地设置另一个状态
- keras - 使用 PyTorch 的 DCGAN 判别器准确度指标