Question

第一个错误：

元素类型无效：预期为字符串（对于内置组件）   或类/函数（用于复合组件），但得到：未定义。您   可能忘记了从定义的文件中导出组件，   否则您可能混淆了默认导入和命名导入。

检查App的呈现方法。

第二个错误：

未捕获的TypeError：无法读取的属性'momentLocalizer' 未定义

此处的代码：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

检查文档，我已使用以下代码修复了该问题：

on_delete

Answer 3

您可以尝试

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

React Big Calendar错误：元素类型无效：预期为字符串（对于内置组件）

3 个答案: