通过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/