Question

我有一个名为iccSdk的类，其函数名为on。现在在我的React render中，我正在调用函数iccSdk.on()。此外，我想从此函数中调度一个操作，因此我尝试使用this.props.actions.chatConnect(data);但this在这里变得未定义。

第一次尝试：

render() {
    console.log(this);
    iccSdk.on('connect', function(data) {
      console.log(this);
      this.props.actions.chatConnect(data);
    });
...
}

在上面的情况下，this在函数内显示为未定义，但在我的iccSdk.on（）函数之外它看起来很好。

第二次尝试：

render() {
    var t = this;
    iccSdk.on('connect', function(data) {
      t.props.actions.chatConnect(data);
    });
...
}

在第二次尝试中它工作正常，但我怀疑这样做是一个好习惯，我也很困惑为什么在我的iccSdk.on（）中无法访问this

Answer 1

功能创建一个新范围。因此，上下文（= this）不同或不存在。你的第二种方法很好。

其他方法：

箭头功能：

箭头功能不会为该功能创建新的上下文。因此，您可以在函数内使用相同的内容。为此，需要ES6。

render() {
    console.log(this);
    iccSdk.on('connect', data => {
      console.log(this);
      this.props.actions.chatConnect(data);
    });
...
}

<强>绑定

使用绑定功能，你可以绑定＆＃34;这个＆＃34;你的功能。

render() {
    console.log(this);
    iccSdk.on('connect', function(data) {
      console.log(this);
      this.props.actions.chatConnect(data);
    }.bind(this));
...
}

<强> thisArg

iccSdk.on也可能采取＆＃34;这个论点＆＃34;。我不确定是不是。您可以在此处详细了解thisArg：https://h3manth.com/new/blog/2014/thisarg-in-javascript/

Answer 2

This是对方法的对象的引用。在方法中，您可以访问给定对象，它是This。但是on方法属于iccSdk，因此，它无法通过此变量访问其他对象。每个方法只能访问自己的对象。

所以，如果你想访问方法中的另一个对象，你可以使用你的第二次尝试（我猜是正常的），或者你可以将方法绑定到你想要访问的对象，如下所示：

function () {
    console.log(this)
}.bind(this)

Redux React：无法在另一个类的函数内访问'this'

2 个答案: