ES6: Access a subclass’ static properties (like React propTypes)

Although this article will expound on using this strategy with React components, it makes sense in any ES6 project where you want to have multiple subclasses provide configuration data to a super class in the form of static props.

In a React project I’m working on, we had a bunch of components doing mostly the same logic in their shouldComponentUpdate methods. In this logic, it would reference a mixture of static properties and instance methods of each component.

It made sense to extract a base class and get the components to subclass it, providing an overridable method here and there for some behavior specific to the subclass in question. This is all easy enough, and works as you would expect.

But as I’ve mentioned, the components in question also had some static props, and I had to access this in the base class.

This is what you have to do in this scenario to access the base properties:

class BaseComponent {
  constructor() {
    console.log(this.constructor.allowedStuff);
  }
}
class SomeComponent extends BaseComponent {
  static allowedStuff = [
    'hello',
    'there',
  ]
}
var cmp = new SomeComponent();

So, to access the actual class definition of the sub class in the super class, you just have to use this.constructor !