Question

更新

我也尝试过使用

componentDidUpdate

在class Application extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.state = { eventslist: [] }; } handleClick() { this.setState({ eventslist: [{ id: '12345', title: 'Temp', start: '10:00:00', end: '11:50:00', dow: [1, 3, 5] }]}); } render() { return ( <div> <h1 onClick={() => this.handleClick()}>Add Test Event</h1> <Cal events={this.state.eventslist} /> </div> ); } } class Cal extends React.Component { componentDidMount() { $('#calendar').fullCalendar({ editable: false, // Don't allow editing of events weekends: false, // Hide weekends defaultView: 'agendaWeek', // Only show week view header: false, // Hide buttons/titles minTime: '07:30:00', // Start time for the calendar maxTime: '22:00:00', // End time for the calendar columnFormat: 'ddd', allDaySlot: false, // Get rid of "all day" slot at the top height: 'auto', // Get rid of empty space on the bottom events: this.props.events }); } componentDidUpdate() { console.log(this.props.events); $('#calendar').fullCalendar('refetchEvents'); } render() { return <div id='calendar'></div>; } } ReactDOM.render(<Application />, document.getElementById('app'));内，而不是代码段中显示的内容，并产生相同的结果（点击后无变化）。

我有一个呈现给DOM的父React组件和一个包含this的子React组件。我希望日历显示动态变化的事件列表。

子组件将事件列表作为prop来接收，它来自父组件的状态（在我的实际应用程序代码中，它来自redux存储，但是我已经隔离了redux这段代码的图片）。日历在子组件的componentDidMount（）方法中初始化，然后我在componentDidUpdate（）中使用fullcalendar的fullcalendar功能，以便在传入新道具时尝试显示已更改的事件。下面的代码片段，我通过使用简单的单击事件处理程序更改父组件的状态（事件列表）。但是，这似乎不起作用。

我也尝试过使用＆＃39; refetchEvent＆＃39;而不是'refetchEvents＆＃39;无济于事。

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>

<div id="app"></app>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>

＆＃13;

Array1: ['green','blue','green','red']

＆＃13;

非常感谢任何帮助！

rerenderEvents，如果你想摆弄它。

Answer 1

This article向我指出了正确的方向：我决定在每次安装和更新时销毁并重新创建整个完整日历。工作子组件如下所示：

class Cal extends React.Component {
  constructor(props) {
    super(props);
    this.updateEvents = this.updateEvents.bind(this);
  }
  componentDidMount() {
    this.updateEvents(this.props.events);
  }
  componentDidUpdate() {
    this.updateEvents(this.props.events);
  }
  updateEvents(eventsList) {
    console.log(eventsList);
    $('#calendar').fullCalendar('destroy');
    $('#calendar').fullCalendar({
      editable: false, // Don't allow editing of events
      weekends: false, // Hide weekends
      defaultView: 'agendaWeek', // Only show week view
      header: false, // Hide buttons/titles
      minTime: '07:30:00', // Start time for the calendar
      maxTime: '22:00:00', // End time for the calendar
      columnFormat: 'ddd',
      allDaySlot: false, // Get rid of "all day" slot at the top
      height: 'auto', // Get rid of  empty space on the bottom
      events: eventsList
    });
  }
  render() {
    return <div id='calendar'></div>;
  }
}

Answer 2

我不想使用Jquery，所以想出了其他一些解决方案：

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullCalendar: "",
    }
    this.updateCalendar = this.updateCalendar.bind(this);
  }

  componentDidMount() {
    this.updateCalendar(this.props.tasks);
  }
  componentWillReceiveProps(nextProps){
    this.setState({fullCalendar: ""})
    this.updateCalendar(nextProps.tasks);
  }
  updateCalendar(props){
    let calendarEvents = [];
    props.forEach(function(each,index) {
      let today = new Date()
      let sevenDayAfter = new Date().setDate(new Date().getDate() + 7);
      each.dueDate > today
        ? each.dueDate > sevenDayAfter
          ? calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"blue"}
          : calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"orange"}
        : calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"red"}
    });

    const calendarOptions = Promise.resolve({
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'month',
      defaultDate: new Date(),
      timezone: 'local',
      editable: false,
      droppable: false,
      selectable: false,
      displayEventTime : false,
      slotDuration: '00:30',
      scrollTime: '08:00',
      displayTime: true,
      firstDay: 1,
      events: calendarEvents,
    });
    calendarOptions.then(function(result){
      this.setState({fullCalendar: <FullCalendar options={result} />})
    }.bind(this))
  }
  render() {
    return (
      <div className="container" id="calendar">
        {this.state.fullCalendar}
      </div>
    )
  }
}

主要的想法，我正在通过dom中的州。如果componentWillReceiveProps，状态设置为null，并且更新功能触发，并设置新状态。

You need to setState to "" because its similar like code above $('#calendar').fullCalendar('destroy');

但是，如果页面刷新日历开始滚动回到顶部。任何解决方案？（您不能使用event.preventDefault（））

组件更新但新道具不会渲染到日历事件中

2 个答案: