如何使用React组件和es6类继承

Question

我正在尝试子类化React组件,并且没有调用我的重写方法:

class Foo extends React.Component {
  someMethod() { ... }

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

class Bar extends Foo {
  someMethod() {
    // Never gets called
  }
}

事实上,当我<Bar />在我的DOM中渲染一个并查看调试器中的组件时,它会将组件类型显示为"Foo".

(另外,请注意我熟悉有关组合与继承的所有论据.相信我,继承确实是我特定用例的正确答案,所以我们不要开始这个论点.)

(另外,我知道潜在的重复问题#27233491,但那里给出的解决方案实际上似乎并不适用于我.)

更新:

我在CodePen上看到了@Aaron的例子,展示了它是如何工作的,但我在我的应用程序中看到了不同的行为.特别:

class Foo extends React.Component {
  render() {
    console.log(this); // Always prints 'Foo...'.
    return <div></div>
  }
}

class Bar extends Foo {
  render() {
    console.log(this); // Always prints 'Bar...'.
    return super.render();
  }
}

我在渲染Bar时在开发控制台上看到的是:

> Bar { props: ...etc. }
> Foo { props: ...etc. }

换句话说,第一个日志语句将'this'打印为Bar类型,第二个将'this'打印为类型Foo.两者都来自同一个render()调用.

Answer 1

发现问题：我在基类上使用 withRouter() 。您不能从 HoC 继承，它会将所有方法视为已调用了 .bind(this) 。