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/