扩展类和使用类的父类

Question

我试图解决作出反应的恼人bind要求如下属性：

class ExtendedComponent extends React.Component { 

    custom_functions: []; 

    constructor(props){ 
     super(props); 
     let self = this; 
     for (let i = 0; i < this.custom_functions.length; i++) { 
      let funcname = this.custom_functions[i]; 
      self[funcname] = self[funcname].bind(self); 
     } 
    } 
} 

class OrderMetricsController extends ExtendedComponent { 

    custom_functions: ['refreshTableOnDateChange', 'load', 'refreshTableOnTabChange']; 

    constructor(props){ 
     super(props); 
     ... 

这将排除需要

this.refreshTableOnDateChange = this.refreshTableOnDateChange.bind(this); 

现在，我得到TypeError: Cannot read property 'length' of undefined问题是this.custom_functions.length。

Answer 1

这

custom_functions: ['refreshTableOnDateChange', 'load', 'refreshTableOnTabChange']; 

是类型的注释，并this.custom_functions仍然是不确定的。相反，它应该是一个属性初始化：

custom_functions = ['refreshTableOnDateChange', 'load', 'refreshTableOnTabChange']; 

或考虑其静态性质，custom_functions可以是静态属性：

static custom_functions = ['refreshTableOnDateChange', 'load', 'refreshTableOnTabChange']; 

在这种情况下，它是在构造函数this.constructor.custom_functions访问。

bind没有什么讨厌的，这是JS的工作原理。

对于严格的命名规范，该方法可以自动地通过方法名遍历，例如其名称匹配on*或*Handler的那些约束：

const uniquePropNames = new Set([ 
    ...Object.getOwnPropertyNames(this), 
    ...Object.getOwnPropertyNames(this.constructor.prototype) 
]); 

for (const propName of uniquePropNames) { 
    if (typeof this[propName] === 'function' && /^on[A-Z]|.Handler$/.test(propName)) { 
    this[propName] = this[propName].bind(this); 
    } 
} 

一个好的选择是@autobind decorator from core-decorators。