When upgrading React, you may be tempted to have your ES6 classes extend Mixin objects (to avoid upgrading these)<\/p>\n
For example:<\/p>\n
\nvar MyMixin = {\n componentShouldUpdate: function() {\n \/\/ some logic\n }\n}\n\nclass MyComponent extends MyMixin {\n constructor() {\n \/\/ do some stuff...\n this.state = {}\n }\n\n render() { \n return (<\/div>)\n }\n})\n<\/pre>\nYou will get a very cryptic error like so:<\/p>\n
\nUncaught TypeError: MyMixin is not a function(anonymous function)\n<\/pre>\nThis is because “objects” are actually a function (a constructor) with the information for how to construct the object in fn._prototype.<\/p>\n
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:<\/p>\n
\nclass MyComponent extends React.createClass({\n mixins: [MyMixin],\n render: () => {}\n}) {\n constructor() {\n \/\/ do some stuff...\n this.state = {}\n }\n\n render() { \n return (<\/div>)\n }\n})\n<\/pre>\n","protected":false},"excerpt":{"rendered":"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 … <\/p>\n