Undefined static method in ES6 classes with decorator in reactions

Question

I have an ES6 class with a decorator. It has a static foo method. However, when I try to access the static method, its undefined.

@withStyles(styles) class MyComponent extends Component { static foo(){ return "FOO"; } render(){ var x = MyComponent.foo; // x=undefined } } 

When I remove the decorator, I can access the static method. Its no longer undefined.

 class MyComponent extends Component { static foo(){ return "FOO"; } render(){ var x = MyComponent.foo; // x=foo() } } 

Is there a workaround for this problem?

Answer 1

If you use babel with es6 , it can be rewritten this way (before es5 ):

 var MyComponent = (function () { function MyComponent() { _classCallCheck(this, _MyComponent); } _createClass(MyComponent, null, [{ key: 'foo', value: function foo() { return "FOO"; } }]); var _MyComponent = MyComponent; Foo = withStyles(MyComponent) || MyComponent; return MyComponent; })(); 

So his problem is that withStyles(MyComponent) will return another function that obviously does not have the static methods that you specified for the source class.