javascript - 在 React.js 中覆盖/扩展 ES7 类的静态属性

Question

ES7 引入了static 属性和方法定义的概念。与支持 ES7 的转译器一起，这些 can be used in React为 props 指定验证器和默认值，如下所示:

export default class ComponentOne extends React.Component {
    static propTypes = {
        foo: React.PropTypes.string
    }
    static defaultProps = {
        foo: 'bar'
    }
    // ...
}

这非常方便，但是当子类发挥作用时会变得棘手。例如，假设将以下模块添加到与上面的 ComponentOne 相同的代码库中:

export default class ComponentTwo extends ComponentOne {
    static propTypes = {
        baz: React.PropTypes.number
    }
    static defaultProps = {
        baz: 42
    }
    // ...
}

我希望 ComponentTwo“继承”其父类(super class) ComponentOne 的属性验证器和默认值。相反，ComponentTwo 上的 propTypes 和 defaultProps 隐藏了 ComponentOne 上的那些，而 React 抛弃了那些在 上定义的ComponentOne.

因为 super 是对当前类原型(prototype)的引用，而 static 应该引用直接卡在原型(prototype)之外的值，我认为这可能有效:

import _ from 'lodash';
export default class ComponentTwo extends ComponentOne {
    static propTypes = _.merge(super.propTypes, {
        baz: React.PropTypes.number
    });
}

但是，这会产生一个错误，大概来自 Babel:Parsing error: 'super' outside of function or class。

这可行，但不是很便携:

export default class ComponentTwo extends ComponentOne {
    static propTypes = Object.assign({
        baz: React.PropTypes.number
    }, ComponentOne.propTypes);
}

是否有任何其他方法可以更干净/可重用地执行此操作？

Answer 1

我偶然发现了这个问题，已经快 3 年了，但谁知道呢，可能有人需要它。 (而且它仍然相关)

鉴于当您扩展一个类时它会自动继承其父类，您不需要覆盖 static propTypes 属性。

给定一个父类:

class Parent {
  static propTypes = {
    parentProp: PropTypes.string
  }
}

如果您不想添加其他 propTypes/defaultProps，您可以简单地:

class Children extends Parent {
  // Do not declare the propTypes, it will extends by itself.
}
console.log(Children.propTypes); // Will output an object with parentProp in it

如果你想明确地告诉你扩展Parent propTypes，或者添加新的propTypes:

class Children extends Parent {
  static propTypes = {
    ...Parent.propTypes, // Yes, you can spread static properties like everything else
    childProp: Proptypes.number,
  }
}

请注意，为了使其与 Babel 正常工作，您可能需要在插件或预设中包含 transform-es2015-classes babel 插件。我的 .babelrc:

"presets": [
  ["env", {
    "include": ["transform-es2015-classes"]
  }],
  "stage-0",
  "react"
],

希望这对您有所帮助!