React + ES6: defaultProps of hierarchy

Question

Due I refactor my code to ES6, I move all defaults to SomeClass.defaultProps = { ... }.

Suppose a situation, when there is a class hierarchy, and I need to keep some defaults to whole hierarchy. But the problem is that defaultProps not work for classes that are extended:

class AbstractComponent extends React.Component {
  constructor(props) { super(props) }
}
class OneOfImplementations extends AbstractComponent {
  constructor(props) { super(props) }
}
//Problem: hierarchy defaults doesn't work
AbstractComponent.defaultProps = { name: 'Super' }

Fiddle example

P.S. I'm wondering where is the best place to keep commons (variables/functions) for the whole hierarchy? Maybe do something like this at AbstractComponent:

constructor(props) {
  super(_.assign(props, {
    commonValue: 128,
    commonCallback: _.noop
  }));
}

But the problem is that's become impossible to override one of properties from a subclass

I'm pretty sure react recommends avoiding this sort of extending of one's own classes actually — Joshua
– Joshua, Commented Oct 30, 2015 at 10:11
@Joshua please explain what you mean. Which sort of extending? — VB_
– VB_, Commented Oct 30, 2015 at 10:17
This bit class OneOfImplementations extends AbstractComponent { I'm fairly sure I saw spicyj saying should be avoided, i.e. everything should extend React.Component — Joshua
– Joshua, Commented Oct 30, 2015 at 10:18
What with the ES6 syntax not supporting mixins, abstracting functionality is a bit unknown, but it looks like the @decorator syntax might be the preferred option - github.com/facebook/react/issues/5010 — Joshua
– Joshua, Commented Oct 30, 2015 at 10:20

nanobar · Accepted Answer · 2017-10-07 14:40:23Z

6

Alternatively if you're using the ~~stage: 0~~ stage: 2 preset in Babel (or the transform directly) you can use es7's proposed static property:

class AbstractComponent extends React.PureComponent {

  static defaultProps = { name: 'Super' }

  // Bonus: you can also set instance properties like this
  state = {
    someState: true,
  }

  // ^ Combined with new arrow binding syntax, you often don't need
  // to override the constructor (for state or .bind(this) reasons)
  onKeyPress = () => {
    // ...
  }
}

edited Oct 7, 2017 at 14:40

answered Oct 30, 2015 at 10:42

nanobar

66.8k26 gold badges156 silver badges178 bronze badges

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

1 Comment

VB_ Over a year ago

unfortunatelly I haven't es7 support

Mayas · Accepted Answer · 2015-10-30 10:40:33Z

5

It seems like the order of declaration of the "defaultProps" property is important:

class AbstractComponent extends React.Component {
  constructor(props) { super(props) }

  render() {
    return <div>Prop: [ {this.props.name} ]</div>
  }
}
AbstractComponent.defaultProps = { name: 'Super' }

class ComponentImpl1 extends AbstractComponent {
  constructor(props) { super(props) }
}

// works

http://jsfiddle.net/jwm6k66c/103/

answered Oct 30, 2015 at 10:40

Mayas

1,5245 gold badges16 silver badges27 bronze badges

2 Comments

VB_ Over a year ago

thanks! But my case look like this jsfiddle.net/jwm6k66c/104. Because OneOfImplementations is required first, and then require AbstractComponent as dependncy

ZephDavies Over a year ago

JS is a scripting language. Order is important. jsfiddle.net/jwm6k66c/2753

Collectives™ on Stack Overflow

React + ES6: defaultProps of hierarchy

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related