Question

我遇到了一个很大的问题，那就是有一个函数无法访问组件中的反应道具：

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

但是当我把它改成胖箭头功能时它可以正常工作

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

这是为什么？我不理解的是什么？

Answer 1

为了讨论的利益。假设您的第一个函数是正常函数，而您的第二个函数是箭头函数

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

现在，就您的情况而言，第一个功能

上的此关键字

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

指的是它自己（或者它当前被调用的函数），因为JS引擎创建了一个引用它的新 this 对象。因此，当你的程序运行时，this.props将具有未定义的值，因为它没有在当前执行上下文中定义（这也是你的renderRow函数）

另一方面...... JS引擎没有为箭头功能创建新的 this 。简单地说，箭头功能没有它自己的这个，因此在你的第二个例子中，

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

希望这会有所帮助：）

Answer 2

在您的第一个示例中，this有另一个范围。

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

的原因

Answer 3

胖箭头功能有效，因为箭头功能中的this没有重新绑定，这有助于保持上下文并且不会在运行时发生变化。

虽然vanilla中的this始终引用外部范围，但要在vanilla函数上使用this，您必须使用.bind（）方法将其绑定到employee函数

Answer 4

箭头函数使我们的代码更简洁，并简化了函数作用域和this关键字。

示例：

    // ES5
    API.prototype.get = function(resource) {


   var self = this;
    return new Promise(function(resolve, reject) {
        http.get(self.uri + resource, function(data) {
            resolve(data);
          });
    });
};

// ES6
API.prototype.get = function(resource) {
    return new Promise((resolve, reject) => {
        http.get(this.uri + resource, function(data) {
            resolve(data);
         });
       });
};

有关详情，请查看here

为什么React Components中的类函数无法访问props？

4 个答案: