擴展類和使用類的父類

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。