如何避免在使用 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 中记录消息和源值时，我将它们设为未定义。

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

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;
    }
}

Answer 2

您面临的“问题”或不便正是实现箭头函数表达式（又名“胖箭头函数”）的原因之一。

您可以在此处阅读有关它们的更多信息。

您使用箭头函数表达式的示例代码如下。 请注意传递参数onerror 。

 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; } }