React.js에서 소품 변경 후 jQuery fullcalendar를 업데이트하십시오.

Question

이벤트 소품 변경 후 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> 
    ); 
    } 
} 

을 그리고 여기 클래스는 fullcalendar 플러그인이 포함되어

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 기능이를 to EmployeesCalendar.

EmployeesCalendar에서 업데이트 이벤트의 상태는 componentWillReceiveProps이며 fullcalendar 플러그인에 전달하여 강제 업데이트합니다. 그러나 fullcalendar는 결코 업데이트되지 않습니다.

제안 사항? 대신

Answer 1

'refetchEventSources'

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

Answer 2

당신이 쓴대로 jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.events); 대신 jQuery(fullCalendar).fullCalendar('refetchEventSources', nextProps.event); 의미합니까?

Answer 3

refetchEvents 메서드는 나를 위해 작동하지만 이벤트가 배열이 아닌 콜백 함수로 구성 될 때까지는 작동하지 않습니다.

componentWillReceiveProps 대신 componentDidUpdate를 사용했습니다.이 상태는 상태 또는 소품이 실제로 변경된 후에 발생합니다. 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를 실행할 때 트리거되는 것처럼 보입니다. 어쩌면 다시 이벤트를 재현 할 수 있을까요? 나는 그걸 시도하지 않았다.