Question

React相对较新。我有以下组件：

var Vertex = React.createClass({

    //2. I want to parameterize this instantiation, however i cannot use this.props inside my render function's <ref> tag, as it gives me parsing errors

    render: function() {
      return (
        <div ref={createVertex()}>
        </div>
      );
    }
  });

var Cloud = React.createClass({

    statics: {
        push: function(points){
          points.forEach(function(point){
           // 1. I want to do a this.push.vertices(point)
        });
      }
    },

    render: function() {
      return (

        <div ref={createCloud()}>
        </div>
      );
    }
  });

function createVertex(){
    return new THREE.Vector3();
};

function createCloud(){
    return new THREE.Geometry();
};

问题：

createCloud（）返回的对象封装在我的React组件中。如何引用上面评论1中提到的该对象的实例？
另外，我无法在render函数标记内使用this.props。如上面评论2中所述，参数化对象实例化的正确方法是什么？

编辑1：添加预期用途的详细信息（不工作）。我试图用星星（THREE.Vector3）创建一个星座（THREE.PointCloud）作为它的顶点

  var options = {
    x: <some val>,
    y: <some val>,
    z: <some val>
  };

  var star = React.createElement(Vertex, options); //Relevant to problem faced in comment 2.

  var stars = [];
  stars.push(star);

  Cloud.push(stars); //Relevant to problem faced in comment 1.

  var constellation = React.createElement(Cloud);

Answer 1

我仍然不能100％确定你要通过使用React来管理THREE.js对象来完成什么，但我会尝试回答你的两个问题。

createCloud（）返回的对象封装在my中反应组件。我应该如何将该对象的实例称为在上面的评论1.中提到了？

简短的回答是......你做不到。

原因在于，根据定义，React的static对象中定义的函数无法访问组件状态或道具，因为状态和道具尚不存在。 “静态”函数旨在在类本身而不是类的实例上调用。因此，假设您的this.push.vertices(point)应该作用于THREE.Geometry对象，那是不可能的，因为该几何体必须存在于组件的状态中。

相反，您可能想要做的是在类中声明一个函数，但在static对象之外。该函数将采用某种输入并使用setState()来更改React组件的内部状态。请记住，React组件状态应该是不可变的，这意味着它永远不应该直接设置。始终单独改变数据，然后使用setState()进行更新。因此，例如，如果您想要更改组件状态中的THREE.Geometry，则可以克隆几何体，更新克隆，然后使用setState使用 new更新组件状态几何。

（旁注：调用在React类之外定义的外部函数是个坏主意，除非你明确地将它们作为模块或其他东西的一部分导入到类中。定义像createVertex这样的东西和createCloud在使用它们的类中。）

另外，我无法在render函数中使用this.props 标签。参数化实例化的正确方法是什么？在上面的评论2中提到的对象？

使用props正是您“参数化”React组件的新实例的方式。我认为你只是过于复杂化了。

请记住，props通过其父（或实例化）传递给组件，而状态用于在创建之后管理内部状态。创建组件时，首先发生的事情之一是调用内置函数getInitialState，此时组件可以访问其props，以便它可以使用它们来初始化它自己的状态。因此，如果你想要一个基于传递给它的props（基本上是“参数”）创建自己内部状态的React组件，它看起来像这样：

Parent使用props
实例化一个新的React组件
新组件使用getInitialState来解析道具并使用它来创建初始状态

稍后，使用setState()更新组件的状态

喜欢这样：

var Cloud = React.createClass({ getInitialState: function(){ // do something with this.props, // for example you could use the props to create a new THREE.Geometry, // then return the initial state to include the new Geometry this.props.arrayOfVertices.forEach(...); ... // make some geometry ... return {geometry: myNewGeometry}; }, render: function(){ return ( <div></div> ); } }); var myCloud = React.createComponent(Cloud, {arrayOfVertices: [...]});

我希望有点回答你的问题。但如果你是React的新手，我会避免使用它来驱动一个THREE.js应用程序。 React旨在呈现一个DOM，除非你非常习惯将它用于此目的，否则你将有一个悲惨的时间让它立即适应THREE.js。为了做到这一点，你需要熟悉React组件的生命周期，从我在这里看到你还没有。单独使用React，让你的海底在你身下，让事情变得简单！

React - 引用封装对象的实例？

1 个答案: