为什么React Components中的类函数不能访问道具？[重复]

Question

我遇到了一个大问题，其中有一个函数无法访问react中组件的道具：

renderRow(employee) {
    console.log('props here', this.props); //undefined
}

但是当我把它改成一个胖箭头函数时，它工作得很好

renderRow = (employee) => {
   console.log('props here', this.props); //success?
}

这是为什么呢？我有什么不明白的？

Answer 1

胖箭头函数可以工作，因为箭头函数中的this不会重新绑定，这有助于保持上下文，并且在运行时不会更改。

虽然vanilla中的this总是引用外部作用域，但要在vanilla函数上使用this，您必须使用. bind（）方法将其绑定到员工函数

Answer 2

在第一个示例中，此有另一个作用域。

employee是第二个示例中的范围，这就是为什么此引用了employee

Answer 3

为了便于讨论。假设第一个函数是正规函数，第二个函数是箭头函数

首先，让我们了解，对于JS中的每个正常函数执行，JS引擎都会创建自己的执行上下文。然后为每个执行上下文创建一个新的“this”，从而属于该函数。

现在，当它与您的案例相关时，第一个函数中的this关键字

renderRow(employee) {
    console.log('props here', this.props); //undefined
}

引用自身（或当前正在调用它的函数），因为JS引擎已经创建了一个引用它的新this对象。因此，当程序运行时，this.props的值将为undefined，因为它未在当前执行上下文中定义（这也是您的renderRow函数）

另一方面JS引擎不会为该箭头函数创建新的。简单地说，箭头函数没有自己的函数，因此在第二个示例中，

renderRow = (employee) => {
   console.log('props here', this.props); //success!!!
}

这指的是外部执行上下文（这是您的React组件），所以现在this.props工作。

有关主题的更多信息，您可以查看这些资源...

这-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

箭头功能-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

希望这有帮助：）