javascript - 组件更新但新 Prop 不会呈现到日历事件中

Question

更新:

我也试过用

$('#calendar').fullCalendar({
  events: this.props.events
});

在 componentDidUpdate 内部而不是代码片段中显示的内容，并且产生相同的结果(点击后没有变化)。

---

我有一个渲染到 DOM 的父 React 组件和一个包含 fullcalendar 的子 React 组件.我希望日历显示动态变化事件的列表。

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

我也尝试过使用“rerenderEvents” ' 而不是 'refetchEvents' 无济于事。

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'));

<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>

如有任何帮助，我们将不胜感激!

The CodePen with the same snippet ，如果你想摆弄一下。

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>;
  }
}