Reactjs React/NPM：如何封装组件？

假设我有一个显示旋转立方体的react应用程序

npm create-react-app

复制粘贴以下内容：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
class App extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    this.mount.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    var animate = function () {
      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 App

瞧，旋转立方体

---

但是，我下一步要做的事情是：封装旋转的立方体，并创建一些下拉列表，允许我查看立方体或其他东西

但我没有得到下拉列表，因为我无法将多维数据集类封装在函数下面：

mport React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
class ICube extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    this.mount.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    var animate = function () {
      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 function App() {
  var cube = ICube()
  return ( 
      <div ref={ref => (cube.mount = ref)} />
  )   
}

mport React，{Component}来自“React”；
从“react dom”导入react dom；
从“三”中导入*作为三；
类ICube扩展组件{
componentDidMount（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//document.body.appendChild（renderer.doElement）；
//使用ref作为Three.js场景的装入点，而不是document.body
this.mount.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=新的三个.MeshBasicMaterial（{color:0xffff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
制作动画（）；
}
render（）{
返回(
（this.mount=ref）}/>
)
}
}
导出默认函数App（）{
var cube=ICube（）
报税表（
（cube.mount=ref）}/>
)   
}

这会生成，但不会渲染。我不确定这种封装应该如何进行。有什么特别的方法来封装这个吗

我还尝试创建一个：

export default class App extends Component {
  cube = ICube()
  componentDidMount() {
  }
  render() {
    return (
      <div ref={ref => (this.cube.mount = ref)} />
    )
  }
}

导出默认类应用程序扩展组件{
cube=ICube（）
componentDidMount（）{
}
render（）{
返回(
（this.cube.mount=ref）}/>
)
}
}

---

作为直接封装，但这不起作用。

您不需要为此创建引用。只需导入组件并在渲染函数中使用即可

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“三”中导入*作为三；
类ICube扩展组件{
componentDidMount（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//document.body.appendChild（renderer.doElement）；
//使用ref作为Three.js场景的装入点，而不是document.body
this.mount.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=新的三个.MeshBasicMaterial（{color:0xffff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
制作动画（）；
}
render（）{
返回(
{//其他一些组件}
)
}
}

要有条件地渲染形状，可以向应用程序组件传递道具，如

---

如果您只是想在另一个组件中进行

ICube

渲染，则形状类型的值可以来自您制作的下拉组件。干脆

//类组件
导出默认类应用程序扩展组件{
render（）{
返回(
{/*更多组件*/}
)
}
}
//功能部件
导出默认函数App（）{
返回(
{/*更多组件*/}
);
}

---

在使用类组件时，React to do

cube=ICube（）

不是常见的模式。看见而且，可以使用类组件和函数组件的任意混合方式来完成组合。

这就是我开始的内容。如果你尝试这样做，它实际上不会起作用。所以，我创建了参考。我在这个网站上工作。好的，我看到你的编辑。。。听起来我可能非常接近，但有一些事情我不明白。在这种情况下，应用程序组件会是什么样子？我在这里为您制作了一个工作示例。本文的目的是演示如何拥有一个根组件，然后在其中拥有子组件。目前，它会渲染两个形状，但您可以将其设置为有条件的。我希望您了解它背后的想法，这是一个了不起的类组件版本。我假设我需要修改我的

index.js

，以使功能版本正常工作？

mport React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
class ICube extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    this.mount.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;
    var animate = function () {
      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 function App() {
  var cube = ICube()
  return ( 
      <div ref={ref => (cube.mount = ref)} />
  )   
}

export default class App extends Component {
  cube = ICube()
  componentDidMount() {
  }
  render() {
    return (
      <div ref={ref => (this.cube.mount = ref)} />
    )
  }
}