When creating React classes in es6 (although in principle I do not know the solution and through the API), you can define defaultProps.

class MyBox extends Component { } myBox.defaultProps = { onEmptyMessage: 'Nothing at here' }

Inheriting the MyBox class, we inherit defaultProps.

 class MyItems extends MyBox { }

But when you try to specify defaultProps for MyItems, the defaultProps of the MyBox class is overwritten.

 MyItems.defaultProps = { onRemoveMessage: 'Are you sure?' }

After this, onEmptyMessage, property from the senior class, will become unavailable. Of course, you can mix defaultProps directly.

 MyItems.defaultProps = _.extend(MyBox.defaultProps, { onRemoveMessage: 'Are you sure?' });

But is there any way to do this in React?

  • Well ... no, no. Why build your bike, especially for ES6, where Object.assign already exists? - D-side

3 answers 3

You probably think that this is some kind of special construction from React , but React , and the es6 class are still the same regular js with inheritance through prototypes.

tl; tr No what React there is no, you are doing everything right

defaultProps is a static method of the MyBox class. In fact, this is the method of the MyBox function (in js classes = function = object), and the behavior that you describe is normal.

You have a first class Сlass1 with the method Class1.method , this is a class method, not its instances.
Now we inherited from Class1 and we have Class2 - which also has a Class2.method method. Now, if we write something like Class2.method = newMethod naturally, the old implementation will overwrite it, because we just overwritten the object property in js .

Therefore, there is no other normal way, except to combine the old church with the new one.

  • if it was a class method - it will not be overwritten, it will remain in that class where it was - Grundy
  • @Grundy in Class2 be overwritten by newMethod - ThisMan
  • yeah, it means extends doing something else, like it is in Class2 and shouldn't have got into, in any case the old method also remains available through the base class - Grundy

NEVER SO DO IT. SERIOUSLY, NEVER.

If you need to somehow expand an existing component, then you do so ...

 class Box extends React.Component { // ... } class AwesomeBox extends React.Component { handleChange() { // awesom logic } render() { // передали все свойства и немного поменяли логику... return <Box {...this.props} onChange={this.handleChange} />; } }

React preaches composition. Inheritance is not the place. In my code, I don’t use ES6 classes at all, it’s not convenient with React ...

  1. You can't just take and use mixins.
  2. It is necessary this for handlers, with React.createClass this happens

    I would also advise not to inherit defaultProps, since the definition of propTypes and defaultProps helps other developers who get your code to immediately see which props should be passed to your component. Therefore, I would prefer to define them explicitly in each component.