javascript - 渲染重构导致功能未定义

我有一个React类，当这样编写时，它可以正常运行：

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

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

为了符合我们使用的样式指南，我应该使用render的简写箭头：

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

但是，只要重写一下，我就会


  未捕获的TypeError：无法读取未定义的属性“ authenticate”


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

请注意，我理解this的值在箭头函数中的作用域不同，但是我试图弄清楚的是如何在React类中正确绑定。这可能不是香草JS，而是一个React问题。

最佳答案

箭头函数按词法绑定上下文，因此this引用外部作用域的上下文。