Рендеринг сети vis.js в контейнер через React.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')); 

Хотя элементы «приложение» и «сеть» находятся в контейнере 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/