React.createClass with custom properties

- 1 answer


How to treat custom javascript properties in React.createClass() ?

Here is example:

var RouterView = React.createClass({
  mixins: [Morearty.Mixin],
  isAuthorized: false,      // should it be part of state ??
  isVerified: false,        // should it be part of state ??
  bindToAuthorization: function() {
    if(/* blah-blah-blah */) {
      this.isAuthorized = true; 
  render: ...

Seems like .isAuthorized and .isVerified semantically should act like component's state, but it is just properties of .createClass() specification.

How .isAuthorized and .isVerified acts? Is it acts like static? Can't found anything about this in React's doc.




It depends where the authorisation takes place.

If the logic for determining authorisation takes place in the child component - and only in the child component - then it would be in the child component state. Which means isAuthorized, isVerified would not be props, they would be state in your child component. And bindToAuthorization would be defined by the component itself, not its parent.

More likely though, you'll want the authorisation logic at a higher point in your component hierarchy, or outside of it altogether (if using Flux).

Remember that lower order components often don't need any state. The parent component can simply re-render them within different props. That makes your bindToAuthorization unnecessary. The parent doesn't need to delegate the authorisation logic to the child component; it simply re-renders it when the relevant properties change.