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

时间:2016-04-05 18:55:55

标签: javascript reactjs

我有一个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问题。

1 个答案:

答案 0 :(得分:1)

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