javascript - 通过 React.js 将 vis.js 网络渲染到容器中

Question

如何将 vis.js 网络渲染到具体的 html 容器中？
我尝试了以下方法，但它不起作用:

<div id="network">
   {new vis.Network("network", data, options)}
</div>

或者我应该用下面的方式渲染它吗？

ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(<Network />, document.getElementById('network'));

虽然元素“app”和“network”位于包装器 html 容器中。

我希望有一个将 vis.js 网络渲染到根文档中的解决方案:

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

干杯!

Answer 1

这对我有用:

 var nodes = new vis.DataSet([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ]);

var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};

    // initialize your network!


var VisNetwork = React.createClass({

    componentDidMount(){
            var network = new vis.Network(this.refs.myRef, data, options);
  },

  render: function() {
    return <div ref="myRef"></div>;
  }
});

ReactDOM.render(
  <VisNetwork />,
  document.getElementById('container')
);

https://jsfiddle.net/ginollerena/69z2wepo/63263/