Extending React.js components

by

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>
    );
}

More Related Contents:

  1. Super in Backbone
  2. Build an HTML table using React from arrays [closed]
  3. Why can’t I directly modify a component’s state, really?
  4. How to delete an item from state array?
  5. How can I use multiple refs for an array of elements with hooks?
  6. What does `void 0` mean? [duplicate]
  7. ESLint Parsing error: Unexpected token
  8. Is there a synchronous alternative of setState() in Reactjs
  9. How to add custom html attributes in JSX
  10. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  11. When is it appropriate to use a constructor in REACT?
  12. Use Async/Await with Axios in React.js
  13. How to prevent re-rendering of components that have not changed?
  14. In ReactJS, why does `setState` behave differently when called synchronously?
  15. Adding a new line in a JSX string inside a paragraph – React
  16. correctly implement backbone comparators
  17. React.js Serverside rendering and Event Handlers
  18. Typescript: can not access member value in inherited class constructor
  19. es6 – import all named module without alias
  20. Detect change in query param react-router-dom v4.x and re-render component
  21. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  22. Accessibility and all these JavaScript frameworks
  23. How to set initial state for useState Hook in jest and enzyme?
  24. Webpack 5 – Uncaught ReferenceError: process is not defined
  25. Using document.querySelector in React? Should I use refs instead? How?
  26. useState hook, setState function. Accessing previous state value
  27. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  28. ReactJS bind(this)
  29. Access from origin ‘https://example.com’ has been blocked even though I’ve allowed https://example.com/
  30. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined

Leave a Comment