Question

我有一个基本的React应用程序，我想将一些常用功能放入基本组件类中，并让我所有其他组件继承该类以访问这些功能。我有这个：

export class BaseComponent extends React.Component {
    constructor() {
        super();
        this.commonlyUsedMethod = this.commonlyUsedMethod.bind(this);
    }

    commonlyUsedMethod() {
        let x = this.someValue; // <--- 'this' is undefined here
    }
}

export class SomeComponent extends BaseComponent {
    onButtonClick() {
        super.commonlyUsedMethod();
    }

    render() {
        return whatever;
    }
}

问题在于，当我从派生类调用super.commonlyUsedMethod()时，this.someValue会在BaseComponent.commonlyUsedMethod()内爆炸，因为this是undefined。我在this.commonlyUsedMethod.bind(this);构造函数中调用BaseComponent，所以我不确定发生了什么。

Answer 1

首先，我（以及大多数React开发社区）不建议您使用继承。 https://facebook.github.io/react/docs/composition-vs-inheritance.html

您拥有的大多数用例都可以使用Higher Order Components解决它，或者在JS文件中编写函数并导入它。

如果您仍想继续这样做。
您需要在附加buttonClick侦听器

时绑定this

export class SomeComponent extends BaseComponent {
    onButtonClick() {
        super.commonlyUsedMethod();
    }

    render() {
        return <div onClick={this.onButtonClick.bind(this)}>Hello</div>;
    }
}

以下是它的工作示例。 https://www.webpackbin.com/bins/-Knp4X-n1RrHY1TIaBN-

更新：问题不在于使用正确的this调用super，问题在于在附加onClick侦听器时没有绑定正确的this。谢谢@Mayank指出它。

Answer 2

所以我不确定这是一个Good Practice™，但是我可以通过拨打this.someCommonMethod()代替super.someCommonMethod()来实现它，就像这样：

export class SomeComponent extends BaseComponent {
    constructor() {
        super();
        this.onButtonClick = this.onButtonClick.bind(this);
    }

    onButtonClick() {
        this.commonlyUsedMethod(); <--- changed 'super' to 'this'
    }

    render() {
        return whatever;
    }
}

我对React和ES6足够新，不知道这是否应该如何运作。任何想法都将不胜感激。

在React基类中未定义this关键字

2 个答案: