Question

我正在尝试使用反应库Storm-react-diagrams：

http://projectstorm.cloud/react-diagrams/?selectedKind=Simple%20Usage&selectedStory=Simple%20flow%20example&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fcode%2Fpanel

我已经使用npm安装了该库，现在我的src /文件夹中有这两个文件：

diag.js
index.js

在diag.js中：

import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
import * as React from "react";


//require("storm-react-diagrams/dist/style.min.css");

export default () => {
    //1) setup the diagram engine
    var engine = new DiagramEngine();
    engine.installDefaultFactories();

    //2) setup the diagram model
    var model = new DiagramModel();

    //3-A) create a default node
    var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
    var port1 = node1.addOutPort("Out");
    node1.setPosition(100, 100);

    //3-B) create another default node
    var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
    var port2 = node2.addInPort("In");
    node2.setPosition(400, 100);

    //3-C) link the 2 nodes together
    var link1 = port1.link(port2);

    //3-D) create an orphaned node
    var node3 = new DefaultNodeModel("Node 3", "rgb(0,192,255)");
    node3.addOutPort("Out");
    node3.setPosition(100, 200);

    //4) add the models to the root graph
    model.addAll(node1, node2, node3, link1);

    //5) load model into engine
    engine.setDiagramModel(model);

    //6) render the diagram!
    return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} allowLooseLinks={false} />;
};

在index.js中：

import DiagramWidget from './diag.js';
import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends Component { 
    render() 
    { 
        return (<div>
            <h2>Graph:</h2> 
            <DiagramWidget />
        </div>); 
    } 
} 

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

但是输出错误：

作为一个初学者，在我的应用程序中使用react模块方面我做错了什么吗？

开发人员提到了CSS：https://projectstorm.gitbooks.io/react-diagrams/docs/Getting%20Started.html

require("storm-react-diagrams/dist/style.min.css");

但是，如果我在任何一个文件中都包含此内容，则除了Graph字外，输出为空白。

Answer 1

在添加index.css后工作：

.srd-demo-canvas {
    height: 100vh;
    background-color: rgb(60,60,60)
}

如React-diagrams invisible

中所述

加载反应库，如风暴反应图

1 个答案: