在React/Flux项目中包含JointJS图

我正在尝试在我的React + Flux项目中包含一个JointJS图.我从那里现有的演示开始.

我的想法是将图表嵌入一个更高级别的组件中,该组件将在我的项目中重用.

我想出的结构如下:

index.html

...


...

app.js

...
ReactDOM.render(
    ,
    document.getElementById('mySec')
);

JointJSDiagram.react.js

...
var JointJSDiagramStore = require('../stores/JointJSDiagramStore');

class JointJSDiagram extends React.Component {
...
    componentDidMount() {
        var el = this.refs[this.props.placeHolder];
        document.addEventListener("DOMContentLoaded", function(elt){
                return function(){JointJSDiagramStore.buildDiagram(elt)};
            }(el), false);
    }
...
    render() {
        return (
);
    }
...
}

module.exports = JointJSDiagram;

JointJSDiagramStore.js

...
var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

var _graph = new joint.dia.Graph();
var _paper = new joint.dia.Paper({
    width: 600,
    height: 200,
    model: _graph,
    gridSize: 1
});


var JointJSDiagramStore = assign({}, EventEmitter.prototype, {
...
    buildDiagram: function(el) {
        _paper.el = el;
       // In here I used the code from: http://www.jointjs.com/demos/fsa
       function state(x, y, label) {

           var cell = new joint.shapes.fsa.State({
           position: { x: x, y: y },
           size: { width: 60, height: 60 },
           attrs: {
              ...
              ...
              ...
       link(star,  block, 'other', [{x: 650, y: 290}]);
       link(star,  code,  '/',     [{x: 490, y: 310}]);
       link(line,  line,  'other', [{x: 115,y: 100}, {x: 250, y: 50}]);
       link(block, block, 'other', [{x: 485,y: 140}, {x: 620, y: 90}]);
       link(code,  code,  'other', [{x: 180,y: 500}, {x: 305, y: 450}]);
    },
...
});
...
module.exports = JointJSDiagramStore;

问题是没有任何可视化,除了一些(7)警告说明:

警告:ReactDOMComponent:不访问DOM节点的.getDOMNode(); 相反,直接使用节点.这个DOM节点由渲染 JointJSDiagram.

UPDATE

如果我明确使用id而不是像这样的refs:

JointJSDiagramStore.js

...
componentDidMount() {
    var el = document.getElementById(this.props.placeHolder);
    document.addEventListener("DOMContentLoaded", function(elt){
            return function(){JointJSDiagramStore.buildDiagram(elt)};
        }(el), false);
    JointJSDiagramStore.addChangeListener(this._onChange);
}
...
render() {
        return (
);
}
...

我不再收到警告,但占位符div上仍然没有显示任何内容.

这个快速测试对我有用.我正在使用反应0.14.3

class Graph extends React.Component {

    constructor(props) {
        super(props);
        this.graph = new joint.dia.Graph();
    }

    componentDidMount() {
        this.paper = new joint.dia.Paper({
            el: ReactDOM.findDOMNode(this.refs.placeholder),
            width: 600,
            height: 200,
            model: this.graph,
            gridSize: 1
        });

        const rect = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            size: { width: 100, height: 30 },
            attrs: {
                rect: { fill: 'blue' },
                text: { text: 'my box', fill: 'white' }
            }
        });

        const rect2 = rect.clone();
        rect2.translate(300);

        const link = new joint.dia.Link({
            source: { id: rect.id },
            target: { id: rect2.id }
        });

        this.graph.addCells([rect, rect2, link]);
    }

    render() {
        return 
;
    }
}