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

Question

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

Uncaught TypeError: Cannot read property 'getEvents' of undefined

这是我正在尝试运行的代码：

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(=>) to normal function because arrow function does not have own 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>
  }
});

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

Understanding how to refer to properties in react components

javascript

reactjs

react-redux