Reactjs 为什么React组件中的类函数不能访问道具？

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

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

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

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

---

为什么会这样？我不明白什么？

在您的第一个示例中，

这个

有另一个范围

---

employee

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

this

引用了

employee

在第一个示例中，

this

有另一个范围

---

employee

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

this

引用了

employee

那里的胖箭头函数工作，因为

this

in-arrow函数不重新绑定，这有助于保持上下文，并且在运行时不会更改

---

虽然vanilla中的

this

总是指外部作用域，但要在vanilla函数中使用

this

，必须使用.bind（）方法将其绑定到employee函数，因为

this

in arrow函数不会重新绑定，这有助于保持上下文，并且在运行时不会更改

---

虽然vanilla中的

this

总是指外部作用域，但要在vanilla函数中使用

this

，必须使用.bind（）方法将其绑定到employee函数，箭头函数使我们的代码更简洁，并简化函数范围和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);
         });
       });
};

---

要了解更多详细信息，请检查箭头函数使我们的代码更加简洁，并简化函数范围和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);
         });
       });
};

---

有关更多详细信息，请查看

，以便于讨论。假设第一个函数是正常函数，第二个函数是箭头函数

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

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

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

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

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

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

此引用外部执行上下文（这是您的React组件），因此现在this.props起作用

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

这个-

箭头功能-

---

希望这有帮助：）

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

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

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

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

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

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

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

此引用外部执行上下文（这是您的React组件），因此现在this.props起作用

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

这个-

箭头功能-

---

希望这有帮助：）

您需要在组件构造函数中添加

renderRow=this.renderRow.bind（this）

。看起来

renderRow

是从不同的上下文调用的。隐式变量

this

始终指函数执行的当前上下文。要确保指向正确的，需要使用将方法绑定到类实例的

arrow

函数，或者在适当的位置使用

.bind

将其与正确的

this

绑定。这必须是用作事件处理程序的方法。如果是这样的话，你就把这个方法置于上下文之外了。Vanilla JSs

addEventListener

及其上下文问题的工作方式相同。

此

在函数内部和

此

内部arrow函数具有不同的范围，我建议您尽可能使用arrow函数传统上，

此

的值主要取决于调用函数的人。下面是对JS中的

this

关键字的一个更好的解释：您需要在组件构造函数中添加

renderRow=this.renderRow.bind（this）

。看起来

renderRow

是从不同的上下文调用的。隐式变量

this

始终指函数执行的当前上下文。要确保指向正确的方法，需要使用将方法绑定到类实例的

arrow

函数或u