在React中定位未定义的正在运行的Three.js组件

import React, { Component } from 'react';
import * as THREE from 'three';

class MyComponent extends Component {
  componentDidMount() {
    // 创建场景、相机、渲染器等Three.js组件
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    // 设置渲染器的大小，并将其添加到DOM中
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建一个立方体并将其添加到场景中
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 设置相机位置，并让其朝向立方体
    camera.position.z = 5;

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  }

  render() {
    return (
      <div ref={ref => (this.mount = ref)} />
    );
  }
}

export default MyComponent;