我使用您共享的 JSSampler 示例将其放在一起。

解决方案

You just needed to use the ref to connect the Network and canvas. Everything else pretty much fell into place. https://codesandbox.io/s/5m2vv1yo04

Cleanup suggestions

• move global variables into react class
• split VisJS highlight code into own file

vis.js docs reveal that the Network object has methods exposed (http://visjs.org/docs/network). react-graph-vis shows that you can get access to these methods by passing in a callback to the getNetwork prop of Graph. That callback will be invoked with a reference to the underlying Network object at which point you should assign that argument to a class property as described by @Irecknagel in the Github issue.

Adding a ref to the Graph component as you are doing wraps the Component. However, it will not necessarily provide a reference to the Network because the Network is an object constructed by the Graph component.

In regards to adding event listeners, the react-graph-vis demo source code might help. They define their event listeners as an object and then pass it in as a prop like so.

// in render or elsewhere depending on scoping needs
const events = {
  select: function(event) {
    var { nodes, edges } = event;
    console.log("Selected nodes:");
    console.log(nodes);
    console.log("Selected edges:");
    console.log(edges);
  }
};
// return of render
<Graph graph={graph} options={options} events={events} style={{ height: "640px" }} />

Due to my lack of familiarity with the packages, I'm not sure what the end goal of calling .getContext("2d") is. I'm not sure if your defined 'end goals' are within the scope of the packages you're using.