了解如何在 React 组件中引用属性

Question

我无法让这个基本组件识别this 对象，无论我尝试什么都会得到错误：

未捕获的类型错误：无法读取未定义的属性“getEvents”

这是我试图开始工作的代码：

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { connect } from 'react-redux';
import ListGroup from 'react-bootstrap/lib/ListGroup';
import ListGroupItem from 'react-bootstrap/lib/ListGroupItem';

export const Selector1 = React.createClass({
  mixins: [PureRenderMixin],

  getEvents: () => this.props.eventTypes || [{name: "NO EVENTS!"}],

  render: _ =>
      <ListGroup>
        {this.getEvents().map(event =>
          <ListGroupItem>{event.name}</ListGroupItem>
        )}
      </ListGroup>
});

function mapStateToProps(state) {
  return {
    eventTypes: state.get('eventTypes')
  };
}

export const Selector1Container = connect(mapStateToProps)(Selector1);

为什么this 在运行时未定义，我需要做什么才能真正引用我想要的内容？

Answer 1

把arrow function(=>)改成普通函数，因为箭头函数没有自己的this

export const Selector1 = React.createClass({
  mixins: [PureRenderMixin],

  getEvents() {
    return this.props.eventTypes || [{name: "NO EVENTS!"}]
  },

  render() {
    return <ListGroup>
      {this.getEvents().map(event =>
        <ListGroupItem>{event.name}</ListGroupItem>
       )}
    </ListGroup>
  }
});