Question

我试图继承React组件，而且我的被覆盖的方法没有被调用：

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

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

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

事实上，当我在DOM中呈现<Bar />并查看调试器中的组件时，它会将组件类型显示为＆＃39; Foo＆＃39;。

（另外，请注意我熟悉有关组合与继承的所有论据。相信我，继承确实是我特定用例的正确答案，所以让我们不要开始参数）。

（另外，我知道潜在的重复问题#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. }

换句话说，第一个日志记录语句打印出这个＆＃39;作为Bar类型，第二个打印＆＃39;这个＆＃39;作为Foo类型。两者都来自同一个render（）调用。

Answer 1

发现问题：我在基类上使用withRouter（）。你不能从HoC继承，它会对所有的方法进行处理，好像已经调用了.bind（this）。

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

1 个答案: