tui-calendar.js:3512未捕获拆分:无法读取未定义的属性‘TypeError’

Question

我在reactjs中使用tui.Calendar，我阅读了开始使用它的文档，但是当我尝试使用tui-calendar.js:3512 ymd = matches[0].split(separator);中的调试器包含日历时，它给了我一个错误Uncaught TypeError: Cannot read property 'split' of undefined，下面是我的代码：

import React, { Component } from 'react';
import Calendar from 'tui-calendar';

export default class Ttt extends Component {
    componentDidMount() {
        this.calendar = new Calendar('#calendar', {
            defaultView: 'month',
            taskView: true,
            template: {
              monthGridHeader: function(model) {
                var date = new Date(model.date);
                var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
                return template;
              }
            }
          });
      }
    render() {
            return <div id="calendar" style={{height: 800 + 'px'}}></div>
        }
}

有人能帮我解决这个问题吗？

Answer 1

当您创建日历类呈现函数时，您的DIV还不存在，它只是告诉react您的组件应该是什么样子。此外，每次div需要更新时都会创建一个新的日历实例，这可能不是您想要的。

相反，应该在不同的生命周期方法中创建它：

render() {
  ...
  return <div id="calendar" style={{height: 800}}></div>;
}
componentDidMount() {
  this.calendar = new Calendar(...)
}

这仍然不是很理想，因为如果您的组件被移除，它将中断(请检查该库是否提供了销毁日历实例并将其放置在componentWillUnmount中的方法)。它也不支持多个日历组件，可以通过为每个实例分配不同的ID来修复。