Component Inheritance in React

Question

Say I want to create a component that is a View, I think I'd do something like this:

class MyView extends View {
  render() { 
    return (
      <View ...>
        <Stuff />
      </View>
    );
  }
}

Now I may be unaware some very basic things here, but would it not be possible just to return the contents of my new view in render, given that the MyView will be included in some other render higher up the containment hierarchy?

So I'd like to be able to this:

class MyView extends View {
  render() {
    return (
      <Stuff />
    );
  }
}

Tan Xiaoqing · Accepted Answer · 2017-02-15 08:43:59Z

1

You should directly return your stuff.

class MyView extends View {
    render() { return <Stuff/>; }
}

answered Feb 15, 2017 at 8:43

Tan Xiaoqing

261 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

blockhead · Accepted Answer · 2017-02-15 08:39:38Z

1

It's possible but a discouraged. The rule given to us by the gang of four is "favor composition" over inheritance. Composition is much more flexible.

The official React docs discuss this as well

answered Feb 15, 2017 at 8:39

blockhead

9,7053 gold badges46 silver badges69 bronze badges

1 Comment

Johnny Over a year ago

I agree with the point on inheritance vs composition. Nonetheless, inheritance should not be banned altogether, it is a valid and useful technique for certain things. Here, I'd like to introduce a type of View which supports certain basic behaviour. And I thought why would I have to return another rendered View if the one doing the rendering is already a View.

juanecabellob · Accepted Answer · 2017-02-15 10:16:47Z

0

As blockhead's answer states, inheritance is discouraged. But something similar of what you described can be achieved with composition.

You can create a base component which always, say could be a List component with different components being loaded depending on the route. Where, for example, the loading of specific data could be always done by the BaseComponent and just passing through props to the Children.

For that you would also need different containers, that call the BaseComponents containing different children components.

At the end the Containers would look this way:

<BaseComponent>
   <Children1 />
   <Children2 />
</BaseComponent>

And:

<BaseComponent>
   <Children10 />
   <Children12 />
</BaseComponent>

answered Feb 15, 2017 at 10:16

juanecabellob

4543 silver badges14 bronze badges

1 Comment

Johnny Over a year ago

Favouring composition does not mean banishing inheritance, at least not in my book :) As I replied above, I think there's a valid role for inheritance (although composition should be used in most of the cases where inheritance used to be used). But my question was really around whether a containing component can just return it's children instead of adding another layer 'of itself' :)

Collectives™ on Stack Overflow

Component Inheritance in React

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related