Question

当涉及props中提供的React.createElement对象时，createElement方法似乎只检查该对象的可枚举属性（或者它至少出现）。< / p>

那么，如果我的ReactJS状态使用ECMAScript-6类建模并使用方法来改变该状态（封装，对吗？），我就不能在调用{{}时将该状态传递给ReactJS组件。 {1}}因为ReactJS不会看到这些方法。所以我必须做这样的事情：

createElement

......哪种打败了目的。我不是Javascript＆＃34; classes＆＃34;的忠实粉丝，但有没有办法以这种方式使用类来为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') )？ Class＆＃34; fields＆＃34;是可以枚举的，所以没有问题，它是我无法通过的方法/行动。

Answer 1

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

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

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

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

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

for (Class<?> clazz : loaded) {
    if (Generator.class.isAssignableFrom(clazz)) {
        // instantiate
    } else {
        // print error
    }
}

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

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

通过＆＃34; class＆＃34; ＆＃34;实例＆＃34;到ReactJS组件代替`props`文字

1 个答案: