React 和 requestAnimationFrame 的上下文问题

Question

我目前正在研究 React 和 Three.js。我正在尝试调用一个更新函数，该函数作为道具传递给另一个组件，如下所示。问题是我得到一个错误 sayign this.cube is undefined.

 public renderer : THREE.WebGLRenderer;
  public scene : THREE.Scene = new THREE.Scene();
  public camera : THREE.PerspectiveCamera = new THREE.PerspectiveCamera(70, 400 / 300, 0.1, 0.1);
  public cube : THREE.Mesh;

  public componentDidMount() {
    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
  }

     public update = () => {
        console.log(this);
        console.log(this.cube);
        this.cube.rotation.x += 0.01;
        this.cube.rotation.y += 0.01;
      }

      public render() {

        const sceneArr : THREE.Scene[] = [];
        sceneArr.push(this.scene);

        return (
          <React.Fragment>
            <Three mainCamera={this.camera} width={400} height={300} update={this.update} scenes={sceneArr} />
          </React.Fragment>
        );
      }

Here is the render function inside the `Three` component calling `requestAnimationFrame`.

      public threeRender = () => {
        this.props.update();
        requestAnimationFrame(this.threeRender);
        this.props.scenes.forEach(scene => {
          this.renderer.render(scene, this.props.mainCamera);
        });
      }

我假设 update 中 this 的上下文错误地引用了 Three 组件，但事实证明 update 中的打印语句显示出矛盾证据。

console.log(this) returns 正确的对象上下文，多维数据集成员显示在日志中，但 console.log(this.cube) returns 未定义。这对我来说毫无意义。有什么想法吗？

Answer 1

在您的 constructor 中初始化 cube 然后您应该能够引用它而不会出现该错误。

constructor(props){
   this.cube = {}
}

现在您可以给 this.cube 一个值并在 update()

中引用它

React 和 requestAnimationFrame 的上下文问题

Context issues with React and requestAnimationFrame

components

three.js

requestanimationframe

reactjs