javascript - react 大日历错误 : Element type is invalid: expected a string (for built-in components)

Question

第一个错误:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

第二个错误:

Uncaught TypeError: Cannot read property 'momentLocalizer' of undefined

代码在这里:https://stackblitz.com/edit/react-bcvdd6

import BigCalendar from 'react-big-calendar';
import { momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment);

class App extends Component {
  constructor() {
    super();
    this.state = {
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2015, 3, 0),
          end: new Date(2015, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2015, 3, 7),
          end: new Date(2015, 3, 10),
        },

        {
          id: 2,
          title: 'DTS STARTS',
          start: new Date(2016, 2, 13, 0, 0, 0),
          end: new Date(2016, 2, 20, 0, 0, 0),
        },

        {
          id: 3,
          title: 'DTS ENDS',
          start: new Date(2016, 10, 6, 0, 0, 0),
          end: new Date(2016, 10, 13, 0, 0, 0),
        },

        {
          id: 4,
          title: 'Some Event',
          start: new Date(2015, 3, 9, 0, 0, 0),
          end: new Date(2015, 3, 10, 0, 0, 0),
        }
      ]
    };  
  }

  render() {
    return (
      <div>
        <BigCalendar
          localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
          />
        </div>
    );
  }
}

Answer 1

你应该这样导入:

import { Calendar, momentLocalizer } from 'react-big-calendar';

<Calendar
    localizer={localizer}
    events={this.state.events}
    startAccessor="start"
    endAccessor="end"
  />