在 React.js 中的 prop 更改后强制更新 jQuery fullcalendar答案

【问题标题】：force update jQuery fullcalendar, after prop change in React.js在 React.js 中的 prop 更改后强制更新 jQuery fullcalendar
【发布时间】：2017-02-01 14:18:37
【问题描述】：

在事件道具更改后，我正在努力更新包装在 React 中的 jQuery fullcalendar。

这是包含数据和日历的类：

export default class Calendar extends Component {
  constructor(props) {
    super(props);
    this.addEvent = this.addEvent.bind(this);
    this.state = {
      events: [
        {
          title: 'Sometitle',
          date: moment(Date.now()),
          allDay: false,
        },
      ],
    };
  }

  addEvent() {
    const date = moment(Date.now()).add(1, 'hour');
    this.setState({
      events: [].concat(this.state.events, [{
        title: 'Sometitle 1',
        date,
        allDay: false,
      }]),
    });
  }

  render() {
    return (
      <div className="allow-scroll">
        <button onClick={this.addEvent}> Add event</button>
        <EmployeesCalendar events={this.state.events} />
      </div>
    );
  }
}

这是包含全日历插件的类：

import React, { Component } from 'react';
import jQuery from 'jquery';

require('fullcalendar');

export default class EmployeesCalendar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: props.events,
    };
  }

  componentDidMount() {
    const { fullCalendar } = this;

    jQuery(fullCalendar).fullCalendar({
      events: this.state.events,
    });
  }

  componentWillReceiveProps(nextProps, nextState) {
    const { fullCalendar } = this;
    const { events } = nextState;
    this.setState({
      events: nextProps.events,
    }, () => {
      console.log(this.state.events);
      jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event);
    });
  }

  componentWillUnmount() {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar('destroy');
  }

  render() {
    return (
      <div ref={(calendar) => { this.fullCalendar = calendar; }} />
    );
  }
}

我有 addEvent 函数将新事件添加到数组中，然后我将它传递给EmployeesCalendar。

在EmployeesCalendar 中，我更新componentWillReceiveProps 中的事件状态，然后将其传递给fullcalendar 插件，强制更新它。但是完整的日历永远不会更新。

有什么建议吗？

【问题讨论】：

标签： jquery reactjs fullcalendar

【解决方案1】：

refetchEvents 方法对我有用，但直到我将事件配置为带有回调的函数而不是数组。

我使用了 componentDidUpdate 而不是 componentWillReceiveProps，它在 state 或 props 实际改变后触发。我认为 componentWillReceiveProps 会起作用，但它是比您需要的更早的事件。它为您提供了更改状态的机会，而您无需这样做。

  componentDidMount() {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar({
      events: (start, end, timezone, callback) => {
        callback(this.state.events);
      },
    });
  }

  componentDidUpdate(nextProps, nextState) {
    const { fullCalendar } = this;
    jQuery(fullCalendar).fullCalendar('refetchEvents');
  }

根据FullCalendar doc，“FullCalendar 将在需要新事件数据时调用此函数。当用户单击上一个/下一个或切换视图时会触发此功能。”当您运行 refetchEvents 时，它似乎也会被触发。也许 rerenderEvents 也是？那个我没试过。

【讨论】：

【解决方案2】：

而不是“refetchEventSources”

jQuery(fullCalendar).fullCalendar('rerenderEvents');

【讨论】：

已经尝试过了，render, refetchEvents events 也是如此

【解决方案3】：

你的意思是jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.events);，而不是你写的jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event);？

【讨论】：

是的，我已经注意到这个错字了，还是不行。