javascript - 渲染重构导致函数未定义

Question

我有一个 React 类，这样编写时可以正确运行:

const LoginContainer = React.createClass({
  authenticate: () => {
      console.log('TODO: Finish authenticating');
  },

  render: function() {
      return (
        <Login authenticate={this.authenticate} />
      );
    }
});

为了符合我们正在使用的样式指南，我应该使用箭头简写来表示 render:

render: () =>
  (
    <Login authenticate={ this.authenticate } />
  ),

但是，一旦我重写这个，我就会明白

Uncaught TypeError: Cannot read property 'authenticate' of undefined

如何在箭头函数中获取对authenticate 的引用？

请注意，我知道 this 的值在箭头函数中的范围不同，但我试图弄清楚如何在 React 类中获得正确的绑定(bind) 。这可能更像是一个 React 问题，而不是普通的 JS。

Answer 1

箭头函数按词法绑定(bind)上下文，以便 this 引用外部作用域的上下文。