If you are upgrading React, you may find situations where you want to switch from Javascript objects to ES6 classes.
For instance, say you have these objects:
var MyMixin = {
componentShouldUpdate: function() {
// some logic
}
}
React.createClass({
mixins: [MyMixin]
getInitialState: function() {
// do some stuff...
},
render: function() {
return ()
}
})
Ideally you would convert everything to classes, and use inheritance to get the mixin in:
class MyMixin {
function componentShouldUpdate() {
// some logic
}
}
class MyComponent {
constructor() {
// do some stuff...
this.state = {}
}
render() {
return ()
}
})
If you can’t do this (e.g. the mixin is in a library, or it’s too much code to change at once), you can also monkey-patch the mixin’s methods into a base class for the component:
var MyMixin = {
componentShouldUpdate: function() {
// some logic
}
}
class MyComponent extends (
React.createClass({
mixins: [MyMixin],
render: () => {}
}) {
constructor() {
// do some stuff...
this.state = {}
}
render() {
return ()
}
})