When upgrading React, you may be tempted to have your ES6 classes extend Mixin objects (to avoid upgrading these)
For example:
var MyMixin = {
componentShouldUpdate: function() {
// some logic
}
}
class MyComponent extends MyMixin {
constructor() {
// do some stuff...
this.state = {}
}
render() {
return ()
}
})
You will get a very cryptic error like so:
Uncaught TypeError: MyMixin is not a function(anonymous function)
This is because “objects” are actually a function (a constructor) with the information for how to construct the object in fn._prototype.
To fix the above error, you can either convert MyMixin to a real class, or make a base class that you can extend that contains the mixins, like so:
class MyComponent extends React.createClass({
mixins: [MyMixin],
render: () => {}
}) {
constructor() {
// do some stuff...
this.state = {}
}
render() {
return ()
}
})