我正在尝试在我的 React+Flux 项目中包含 JointJS 图。 我从现有的可用演示 there 开始.
我的想法是将图表嵌入到更高级别的组件中，该组件将在我的项目中重用。
我想出的结构如下:
index.html
...
<body>
<section id="mySec"></section>
...
app.js
...
ReactDOM.render(
<JointJSDiagram id="1"/>,
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 (<div ref={this.props.placeHolder}/>);
}
...
}
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) 警告之外，没有任何可视化内容:
Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by
JointJSDiagram.
更新
如果我明确使用 id 而不是像这样的引用:
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 id={this.props.placeHolder}/>);
}
...
我不再收到警告，但占位符 div 上仍然没有显示任何内容。
最佳答案
这个快速测试对我有用。我正在使用 react 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 <div ref="placeholder" ></div>;
}
}关于reactjs - 在 React/Flux 项目中包含 JointJS 图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34278642/