时间戳

首页 > 解决方案 > 反应图不可见并显示错误

reactjs - 反应图不可见并显示错误

问题描述

我尝试使用react-diagrams库，但遇到了一些问题。

首先在一线

const link = port1.link<DefaultLinkModel>(port2);

它向我显示了一个错误

类型错误：link.addLabel 不是函数

并假设我删除了链接部分，代码运行，我没有收到任何错误，但网页上什么也看不到......

这是代码

应用程序.js

import React from "react";
import createEngine, {
  DefaultLinkModel,
  DefaultNodeModel,
  DiagramModel
} from "@projectstorm/react-diagrams";

import { CanvasWidget } from "@projectstorm/react-canvas-core";

// create an instance of the engine with all the defaults
const engine = createEngine();

// node 1
const node1 = new DefaultNodeModel({
  name: "Node 1",
  color: "rgb(0,192,255)"
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort("Out");

// node 2
const node2 = new DefaultNodeModel({
  name: "Node 1",
  color: "rgb(0,192,255)"
});
node2.setPosition(100, 100);
let port2 = node2.addOutPort("Out");

//  link them and add a label to the link
const link = port1.link < DefaultLinkModel > port2;
link.addLabel("Hello World!");

const model = new DiagramModel();
model.addAll(node1, node2);
engine.setModel(model);

class App extends React.Component {
  render() {
    return <CanvasWidget engine={engine} />;
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from "./App"
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <style>
      .srd-diagram {
        height: 100vh;
      }
    </style>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

请帮我整理一下...

标签： reactjsjsx

解决方案

我知道这篇文章太旧了，但如果有人在苦苦挣扎，仍然会有所帮助。

如果要在节点之间添加链接，请尝试为link.

  const node1 = new DefaultNodeModel({
    name: "Node 1",
    color: "rgb(0,192,255)",
  });
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort("Out");

  const node2 = new DefaultNodeModel({
    name: "Node 2",
    color: "rgb(0,100,255)",
  });
  node2.setPosition(100, 200);
  let port2 = node2.addInPort("In");

  const link = new DefaultLinkModel();
  link.setSourcePort(port1);
  link.setTargetPort(port2);

对于第二部分：

并假设我删除了链接部分，代码运行，我没有收到任何错误，但网页上什么也看不到......

您需要设置画布的高度和宽度以使其可见。

应用程序.js

<CanvasWidget className="canvas" engine={engine} />

应用程序.css

.canvas {
  height: 400px;
  width: 100%;
}

推荐阅读