Question

在我的组件中，我正在调用另一个文件中定义的函数，如下所示：

import React from 'react';
import { widgetComponentDidMount } from "../../SharedData/widget";

export default class Component extends React.Component {

    constructor(props) {
        super(props);
    };

    componentDidMount(){
        widgetComponentDidMount(this).bind(this);
    }

    //render, etc

};

但是当我将调试器放入函数的定义时，“this”是未定义的：

export function widgetComponentDidMount() {
    var _this = this;
    debugger
    //_this is undefined
}

我知道我可以将此作为参数传递并以这种方式引用它，但我宁愿避免每次都传递它。这不是绑定的目的吗？我只能在同一个文件中使用它。任何想法为什么它是未定义的以及如何在不将其作为参数传递的情况下访问“this”？

Answer 1

您在致电bind之前正在执行此功能。你必须在执行之前绑定：

widgetComponentDidMount.bind(this)();

如果是我，我实际上在构造函数方法中执行bind并存储结果，因此您不需要为每个调用创建一个新函数：

export default class Component extends React.Component {

  constructor(props) {
    super(props);
    this.widgetComponentDidMount = widgetComponentDidMount.bind(this);
  }

  componentDidMount() {
    this.widgetComponentDidMount();
  }
}

为什么在调用.bind（this）时函数未定义？

1 个答案: