我该如何调用组件内部的方法，该方法是从react.js中的第3方库更新的？

Question

Ok so Im trying to call a method from another library called the xtk library I have tested the JavaScript code on its own and it works just fine. Now Im just trying to create a component react that will run it. Im a newbie when it comes to both js and react so I might not even be asking the right question here.

componentDidMount = function(){
  this.v = X.renderer3D(this.refs.v);
  this.v.container ='v';
  this.v.init();
  this.randF = X.mesh.randF(this.refs.randf);
  this.file.randF = '../Assets/rgrid.vtk';
  this.v.add(this.randF);
  this.v.render();
}

Where Im essentially trying to execute this javascript code with that react.js code.

window.onload = function() {

  // create and initialize a 3D renderer
  var r = new X.renderer3D();
  r.init();

  // create a new X.mesh
  var skull = new X.mesh();
  // .. and associate the .vtk file to it
  skull.file = 'http://x.babymri.org/?skull.vtk';
  // .. make it transparent
  skull.opacity = 0.7;

  // .. add the mesh
  r.add(skull);

  // re-position the camera to face the skull
  r.camera.position = [0, 400, 0];



  r.render();

};

I keep constantly getting errors thrown at me saying that render3D is not a class, that X is not a constructor and so on. I have essentially spent the last few days trying to figure this out mostly on my own so any advice at all, even of where to look would be absolutely great.

thank you.

Answer 1

Ok this took me a long time to figure out so I want other people to not go through this.

You cannot simply install xtk, you have to eject from create-react-app, Delete your config.lock file and all of your modules, then run npm install on it and run the xtk install on it.

Then you will be able to use it.

This is just in general the way to use full robust 3rd party libraries without having to build everything from scratch.