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

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 的 props，你需要在孩子的构造函数中这样做：

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 也适用于此）。

或者，如果你不喜欢构造函数的方式，你可以通过getter实现类似的效果：

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