渲染重构会导致未定义的函数

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 } />
  ),

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

  

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

如何在箭头功能中获得对authenticate的引用？

请注意，我理解this在箭头函数中的作用区别不同，但我想弄清楚的是如何在React类中获取正确的 >。这可能比香草JS更像React问题。

Answer 1

箭头函数在词汇上绑定上下文，以便this引用外部范围的上下文。