了解如何引用 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>
  }
});