Question

考虑这个课程

class BasePage extends Component {
  state = {
    locale: 'en'
  };

  render() {
    return (<div>{ this.state.locale }</div>);
  }
}

如何声明一个子类，该子类也将声明一个不会覆盖父类属性但会扩展它的state属性？

class FooPage extends BasePage {
  state = Object.assign( ?super.state, {
    foo: 'Hello'
  });

  render() {
    return (<div>{ this.state.locale } : { this.state.foo }</div>);
  }
}

显然，super.state不起作用，BasePage.prototype.state也不存在。

这甚至可能吗？

Answer 1

我将从简单的JS角度回答这个问题（但如果您使用React，则相同的概念也适用于React）。

为了使用base的道具，您需要在孩子的构造函数中使用

JAVA_MAJOR_VERSION=$($JAVA -version 2>&1 | sed -E -n 's/.* version "([^.-]*).*/\1/p')

演示：https://repl.it/@mrchief/UrbanLiveTrace

关于React的注意事项：由于React是基于普通JS构建的，因此相同的概念（即，首先在其中应用class BasePage { state = { locale: 'en' }; } class FooPage extends BasePage { constructor() { super(); // can't access this props without calling super first // this.state refers to super's state prop. We simply extend it using Object.assign. this.state = Object.assign(this.state, { foo: 'Hello' }); } render() { const { locale, foo } = this.state; console.log({ locale, foo }); // prints { locale: 'en', foo: 'Hello' } } }）。

或者，如果您不喜欢构造方法，则可以通过getter获得类似的效果：

super

演示：https://repl.it/@mrchief/GloriousGainsboroOpensoundsystem

如何在子类体中的声明时访问和扩展ES7父类属性？

1 个答案: