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()调用.