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

Question

It seems that when it comes to the props object provided in React.createElement , the createElement method only checks the enumerable properties of that object (or so it appears at least).

So, if I have my ReactJS state modeled using an ECMAScript-6 class with methods to alter that state (encapsulation, right?), I can't just pass that state to a ReactJS component in the call to createElement as ReactJS won't see the methods. So I have to do things like this:

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')
)

... which sort of beats the purpose. I am no big fan of Javascript "classes", but is there a way for classes to be used in that way to provide props for ReactJS elements? Class "fields" are enumerable and so pose no problem, it's the methods/actions that I can't pass this way.

Answer 1

The problem you're having is that your methods aren't defined on the class instance, they're defined on the constructor's prototype .

When React iterates over the class instance it won't iterate over the members on the prototype.

It's simpler to model your application state as a regular object and you'll probably find that approach makes your application more predictable.

Using an object will also allow you to serialize your state for saving and reading as JSON (there's no way to serialize a class).

If you are using class because you need to make multiple instances of your state, then you can use a factory function instead.

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

If you're using a class because you want to directly manipulate your state with some methods, then you can also achieve this with a factory function and a prototype.

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

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

At least in this case, it's much clearer to me that the update method won't be present on the object returned from makeAppState .

If you want to pass the methods and properties together, just return an object literal with both.

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