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

Question

考虑到这个 class

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

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

我如何声明子 class 也将声明 state 属性，该属性不会覆盖父 class 属性，但会扩展它？

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 的道具，您需要在 child 的构造函数中这样做：

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' }
  }
}

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

关于 React 的注意事项：由于 React 是建立在普通 JS 之上的，因此相同的概念（即调用 super 首先也适用于那里）。

或者，如果您不喜欢构造方法，您可以通过 getters 实现类似的效果：

class BasePage {
  get state()  {
    return { locale: 'en' }
  } 
}

class FooPage extends BasePage {
  get state()  {
    return Object.assign(super.state, {
      foo: 'Hello'
    })
  }  

  render() {
    const { locale, foo } = this.state;
    console.log({ locale, foo });  // prints { locale: 'en', foo: 'Hello' }
  }
}

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

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

How to access and extend ES7 parent class attributes at declare time in sub-class body?

javascript

ecmascript-next