奇怪的類屬性行爲

我正在使用React和碰到奇怪的東西。奇怪的類屬性行爲

這沒有工作，所以我不得不改變componentDidMount的價值和它的工作：

class C extends React.Component { 

    componentDidMount =() => this.animate(); // Lambda is required? 

    animate =() => ... 

}

有沒有人有一個很好的解釋，爲什麼這是必需的？

2016-11-26 justasking

可能'animate'在內部使用'this'，當通過'this.animate（）'調用時，會比通過'animate'函數引用不同。而是嘗試：'componentDidMount = this.animate.bind（this）'綁定'thisArg' –

我不認爲這是問題，因爲第二個代碼片段完美地工作 – justasking

，表明調用實際上是問題，所以我的建議應該管用。顯示'this.animate'功能的內容 –

如果你寫

class C extends React.Component { 
    componentDidMount = this.animate; // <--- 
    animate =() => ... 
}

然後componentDidMount設置爲undefined，因爲animate沒有設置在那個時候。

With componentDidMount =() => this.animate();this.animate();每次調用componentDidMount都會被解析，這就是爲什麼這對您有用。

如果你寫這樣的說法：

class C extends React.Component { 
    animate =() => ... 
    componentDidMount = this.animate; // <--- 
}

然後componentDidMount將引用您之前分配給animate功能。

但是，如果你要定義你應該檢查的baao回答一個類的方法，因爲這樣你不應該使用的分配，但在方法定義animate() {}

2016-11-26 15:14:11

這是什麼語法？是'animate'和'componentDidMount'應該是這個Component的實例屬性？你不應該把它寫成像'animate（）{/ * ... * /}'或'animate：function（）{/ * ... * /}'等等嗎？這些看起來像全局變量 –

@WilliamB分配在構建階段進行評估，所以是的，它們是實例屬性。如果你編寫'animate（）{/ * ... * /}'，那麼它就是這個類的一個方法，它將在構建階段之前被設置爲原型鏈，所以OP肯定也可以通過使用'animate（）{/ * ... * /}'這確實是一個更好的主意。 –

方法是首選方法嗎？原因在於它們是在施工前被設置的？還有更多的原因嗎？ – justasking

應定義動畫的方法作爲一個類的方法，不是作爲一個箭頭功能。

class C extends React.Component { 
    componentDidMount = this.animate; 
    animate() {} 
}

2016-11-26 15:20:44 baao

這取決於如何使用該方法。 –

OP的用法表示他認爲使用類方法，不是嗎？ @FelixKling – baao

如果沒有在其他地方使用它（例如'render'中的事件處理程序），那麼是的。這就是我的意思是「依賴」。 –

回答