将“类”“实例”传递给 ReactJS 组件来代替“props”文字

Question

似乎当涉及props中提供的对象时React.createElement，该createElement方法仅检查该对象的可枚举属性（或者至少看起来如此）。

因此，如果我使用 ECMAScript-6 类对 ReactJS 状态进行建模，并提供改变该状态的方法（封装，对吧？），我不能只在调用中将该状态传递给 ReactJS 组件，因为 ReactJS 不会createElement看到方法。所以我必须做这样的事情：

const MyApp = React.createClass({
      propTypes: {
          methodA: React.PropTypes.func.isRequired,
          methodB: React.PropTypes.func.isRequired
      },
...});

class MyAppState {
...
}

let appState = new MyAppState();
ReactDOM.render(
    React.createElement(MyApp, Object.assign(
         {
          methodA: s.methodA.bind(s),
          methodB: s.methodB.bind(s)
         }, appState))
    , document.getElementById('somePlace')
)

...这有点违背了目的。我不太喜欢 Javascript“类”，但是有没有办法以这种方式使用类来提供propsReactJS 元素？类“字段”是可枚举的，因此不会造成问题，这是我无法通过这种方式传递的方法/操作。

Answer 1

您遇到的问题是您的方法不是在类实例上定义的，而是在构造函数的原型上定义的。

当 React 迭代类实例时，它不会迭代原型上的成员。

将应用程序状态建模为常规对象会更简单，您可能会发现这种方法使您的应用程序更具可预测性。

使用对象还允许您序列化状态以保存和读取为 JSON（无法序列化类）。

如果您使用类是因为您需要创建状态的多个实例，那么您可以使用工厂函数。

function makeAppState(foo, bar, baz) {
  return {
    qux: foo + bar - baz
  };
}

如果您使用类是因为您想使用某些方法直接操作状态，那么您也可以使用工厂函数和原型来实现此目的。

function makeAppState(foo, bar, baz) {
  var state = Object.create(AppStatePrototype);
  state.qux = foo + bar - baz;
  return state;
}

var AppStatePrototype = {
  update() {
    this.qux = 0;
  }
};

至少在这种情况下，我更清楚该update方法不会出现在从makeAppState.

如果您想将方法和属性一起传递，只需返回一个包含两者的对象文字即可。

function makeAppState(foo, bar, baz) {
  return {
    qux: foo + bar - baz,
    update() {
      this.qux = 0;
    }
  };
}