javascript - 如何避免在使用 es6 的反应中使用绑定？

Question

我正在使用 window.onerror 将 javascript 错误记录到文件中，如下面的代码所示，

class ErrorComponent extends react.purecomponent {
    constructor(props) {
        super(props);
        this.handle_error = this.handle_error.bind(this);
    }

    componentDidMount = () => {
        window.onerror = this.handle_error;
    }

    handle_error = (message, source, lineno, colno, error) => {
        const payload = {
            'message': message,
            'source': source,
        };
        return false;
    }

    render = () => {
        return null;
    }
}

所以从上面的代码可以看出我使用了绑定。如果我不绑定 handle_error 并在 componentdidmount 中调用如下

componentDidMount () {
    window.onerror = this.handle_error();
}

当我在 handle_error 中记录消息和源值时，我将它们视为未定义。

我该如何解决它...我不想使用 bind 以及如何在没有绑定 handle_error 方法的情况下解决这个问题。有人可以帮我解决这个问题。谢谢。

标签： javascriptreactjs

Answer 1

使用粗箭头函数

胖箭头函数还应该将this上下文传递给handle_error函数。

class ErrorComponent extends react.purecomponent {
    componentDidMount = () => {
        window.onerror = (message, source, lineno, colno, error) => this.handle_error(message, source, lineno, colno, error);
    }

    handle_error = (message, source, lineno, colno, error) => {
        const payload = {
            'message': message,
            'source': source,
        };
        return false;
    }

    render = () => {
        return null;
    }
}