React + ES6：层次结构的默认属性

Question

由于我将代码重构为 ES6，因此我将所有默认值移至 SomeClass.defaultProps = { ... }。

假设一种情况，当有一个类层次结构时，我需要为整个层次结构保留一些默认值。但问题是defaultProps 不适用于扩展类：

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. 我想知道为整个层次结构保留公共资源（变量/函数）的最佳位置在哪里？也许在AbstractComponent 做这样的事情：

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

但问题是无法覆盖子类中的属性之一

Answer 1

或者，如果您在 Babel 中使用 stage: 0 stage: 2 预设（或直接使用 transform），您可以使用 es7 建议的静态属性：

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 = () => {
    // ...
  }
}

Answer 2

“defaultProps”属性的声明顺序似乎很重要：

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/