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コンテナにありますが、

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

乾杯：

私はvis.jsネットワークがルート文書にレンダリングされたソリューションをいただければ幸いです！

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/