javascript - React + ES6: defaultProps of hierarchy - Stack Overflow

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 mons (variables/functions) for the whole hierarchy? Maybe do something like this at AbstractComponent:

constructor(props) {
  super(_.assign(props, {
    monValue: 128,
    monCallback: _.noop
  }));
}

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

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 mons (variables/functions) for the whole hierarchy? Maybe do something like this at AbstractComponent:

constructor(props) {
  super(_.assign(props, {
    monValue: 128,
    monCallback: _.noop
  }));
}

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

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Oct 30, 2015 at 10:11 VB_ asked Oct 30, 2015 at 9:56 VB_VB_ 45.7k4444 gold badges161161 silver badges312312 bronze badges 10

• 1 I'm pretty sure react remends avoiding this sort of extending of one's own classes actually – Joshua Commented Oct 30, 2015 at 10:11
• @Joshua please explain what you mean. Which sort of extending? – 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 Commented Oct 30, 2015 at 10:18
• I'm trying to find it, but can't find the github issue – 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./facebook/react/issues/5010 – Joshua Commented Oct 30, 2015 at 10:20

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 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 = () => {
    // ...
  }
}

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/jwm6k66c/103/