為什么作為箭頭函數的方法在React類中起作用而在普通類中不起作用？

Question

我們可以將組件類的方法聲明為箭頭函數，如下所示：

class SomeComponent extends React.Component {
  someMethod = () => { // <<----- This does not throw error
    // some code
  }
}

..那不會拋出任何錯誤，但是下面的錯誤：

class SomeNormalClass {
  someMethod = () => { // <<----- This throws error
    // some code
  }
}

在someMethod之后，它表示意外的= 。 如果我將someMethod改回正常功能，而不是將其聲明為箭頭功能，則效果很好，如下所示。 為什么？

class SomeNormalClass {
  function someMethod() { // <<----- This works fine
    // some code
  }
}

Answer 1

第一個示例中的someMethod是類的屬性，而不是方法。 BabelJS支持類中的屬性，但不支持本機js。 您可以在這里看到區別。 您應該在Vanilla JS的constructor添加一些屬性。

Answer 2

someMethod = () => {...}是類字段。 類別字段是第3階段的提案 ，其本身不受支持，需要由Transpiler（Babel）進行轉換； someMethod類字段是構造函數代碼的語法糖：

constructor() {
  this.someMethod = () => {
    // some code
  }
}

在相同條件下使用時， SomeComponent和SomeNormalClass都可以正常工作 。 他們都不會在本地工作。