Extending React.js components
Solution 1
To get something that resembles inheritance (actually composition as pointed out in comments), you can make an Airplane
in your example wrap itself in a Vehicle
. If you want to expose methods on Vehicle
in the Airplane
component, you can use a ref and connect them one-by-one. This is not exactly inheritance (it's actually composition), particularly because the this.refs.vehicle
will not be accessible until after the component has been mounted.
var Vehicle = React.createClass({
...
});
var Airplane = React.createClass({
methodA: function() {
if (this.refs != null) return this.refs.vehicle.methodA();
},
...
render: function() {
return (
<Vehicle ref="vehicle">
<h1>J/K I'm an airplane</h1>
</Vehicle>
);
}
});
Also it's worth mention that in the React official documentation they prefer composition over inheritance:
So What About Inheritance? At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
Another thing worth mention that using ES2015/ES6+ you can also spread the object props from Airplane
component to the Vehicle
component
render: function() {
return (
<Vehicle {...this.props}>
<h1>J/K I'm an airplane</h1>
</Vehicle>
);
}
Solution 2
If you use webpack+babel+react NPM package set up in your project, then in ES6 OOP implementation it should be as simple as this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class BaseComponentClass extends Component {
componentDidMount() {}
render() { return (<div>Base Component</div>) }
}
class InheritedComponentClass extends BaseComponentClass {
// componentDidMount is inherited
render() { return (<div>Inherited Component</div>) } // render is overridden
}
ReactDOM.render(<InheritedComponentClass></InheritedComponentClass>,
document.getElementById('InheritedComponentClassHolder'));
Note: Here is a simple starter kit with such set up: https://github.com/alicoding/react-webpack-babel
Solution 3
By leveraging ReactOO, you can easily use inheritance (Disclaimer: I'm the author of ReactOO):
(function () {
// Class definitions. ReactOO requires class definition first just like you did in an OO way.
window.Vehicle = window.ReactOO.ReactBase.extend({
getReactDisplayName: function () {
return 'Vehicle';
},
onReactRender: function (reactInstance) {
var self = this;
var text = self.methodC();
return React.createElement('div', {}, text);
},
methodA: function () {
console.log('Vehicle method A');
},
methodB: function () {
console.log('Vehicle method B');
},
methodC: function () {
return 'Vehicle method C';
}
});
window.Airplane = window.Vehicle.extend({
getReactDisplayName: function () {
return 'Airplane';
},
methodC: function () {
// Call this._super() to execute parent method.
//this._super();
return 'Airplane method C';
}
});
var vehicle = new window.Vehicle();
vehicle.render({}, '#vehicle');
var airPlane = new window.Airplane();
airPlane.render({}, '#airPlane');
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ReactOO Vehicle-Aireplane Example</title>
<link rel="stylesheet" href="css/base.css" />
<script src="scripts/react.js"></script>
<script src="scripts/react-dom.js"></script>
<script src="../src/reactoo.js"></script>
</head>
<body>
<div id="vehicle">
</div>
<div id="airPlane">
</div>
<script src="scripts/vehicleAirplane.js">
</script>
</body>
</html>
Ahrengot
Hi, nice to meet you! My name is Jens and I'm a senior full-stack developer. I build websites and apps for a wide variety of clients ranging from angel-funded startups to fortune 500 companies. I'm experienced in leading teams and working on projects where you need to satisfy the needs of many different stakeholders. I pride myself in my process and workflows, as they ensure that projects are kept on track and meet the schedule and budget available.
Updated on May 15, 2020Comments
-
Ahrengot almost 4 years
One of the things I appreciate the most about Backbone.js is how simple and elegant inheritance works. I'm starting to get to grips with React, and can't really find anything in react that resembles this Backbone code
var Vehicle = Backbone.View.extend({ methodA: function() { // ... } methodB: function() { // ... } methodC: function() { // ... } }); var Airplane = Vehicle.extend({ methodC: function() { // Overwrite methodC from super } });
In react we have mixins, and using those we could get somewhat close to the above example if we went like this
var vehicleMethods = { methodA: function() { // ... } methodB: function() { // ... } } var Vehicle = React.createClass({ mixins: [vehicleMethods] methodC: function() { // Define method C for vehicle } }); var Airplane = React.createClass({ mixins: [vehicleMethods] methodC: function() { // Define method C again for airplane } });
This is less repetitive than defining the same stuff over and over again, but it doesn't seem to be nearly as flexible as the Backbone way. For instance, I get an error if I try to redefine/overwrite a method that exists in one of my mixins. On top of that, the React.js way is more code for me to write.
There is some incredibly clever stuff in react, and it feels like this is more the case of me not getting how to properly do this, than it feels like a feature missing from React.
Any pointers are greatly appreciated.
-
Paul O'Shannessy over 9 yearsComposition, like you have here, is generally the approach we suggest. I'll add, that when you do this, you might not even need the methods that you think you might need and can communicate more through props and rerendering.
-
Ross Allen over 9 yearsThanks, @PaulO'Shannessy. I added a note that this is actually composition.
-
Dmitry Minkovsky over 8 years@PaulO'Shannessy This is fine unless you want to wrap/extend methods like
#componentWillMount()
, which are called at a time when refs is not yet available. -
Faisal Mq over 8 yearsBelow somebody has suggested to use reactto. But I guess this answer is more appropriate as things in React should better be done the React way. Yes, the composition style of React makes here more sense.
-
Adam almost 8 yearsI think the fact that this response used ellipses is exactly the elision that I see in the argument for composition. You're leaving out a huge amount of boilerplate. How is this such a better solution than the original case that it can be considered "correct"?
-
slideshowp2 over 7 yearsI think If my baseComponent is abstract, I don't want to render it. This case will not get the baseComponent's ref and can not access to baseComponent's methods.
-
Pier over 7 yearsCareful with this. You may encounter problems down the road since React recommends using composition over inheritance. I did that and I had to revert this approach mid project. It wasn't fun.
-
ruffin over 7 years@Pier Very interesting, and sure enough, the React docs say exactly that: "At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies... If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it." [emph mine] A
class
incompatible mindset, it appears. -
sidonaldson over 4 yearsI've created a working demo to showcase this pattern and how the methods are overwritten! codesandbox.io/s/nice-robinson-8lk4y