javascript - 将 "class" "instances"传递给 ReactJS 组件以代替 `props` 文字

Question

似乎在涉及到React.createElement中提供的props对象时，createElement方法只检查了它的可枚举属性对象(至少看起来如此)。

因此，如果我使用 ECMAScript-6 类对我的 ReactJS 状态进行建模，并使用方法来改变该状态(封装，对吗？)，我不能在调用 时将该状态传递给 ReactJS 组件createElement 因为 ReactJS 看不到这些方法。所以我必须做这样的事情:

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“类”的忠实粉丝，但是有没有办法以这种方式使用类来为 ReactJS 元素提供 props ？类“字段”是可枚举的，所以没有问题，这是我不能通过这种方式传递的方法/操作。

Answer 1

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

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

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

使用对象还允许您序列化您的状态，以便将其保存和读取为 JSON(无法序列化类)。

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

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

如果您使用类是因为您希望通过某些方法直接操纵您的状态，那么您也可以使用工厂函数和原型(prototype)来实现。

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;
    }
  };
}