React Big Calendar Error: 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"
  />

Answer 2

查看文档，我已经用这段代码解决了这个问题：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Calendar, 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>
        <Calendar
          localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
          />
        </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 3

你可以试试这个

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

React Big Calendar Error: Element type is invalid: expected a string (for built-in components)

React Big Calendar Error: Element type is invalid: expected a string (for built-in components)

javascript

reactjs

react-big-calendar