reactjs – 如何为react-big-calendar创建自定义事件组件？

发布时间：2020-12-15 05:08:19 所属栏目：百科来源：网络整理

导读：文档提到了能够创建自定义组件： http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components 我尝试过： BigCalendar events={this.state.bookings} step={60} timeslots={1} defaultView='week' defaultDate={new Date(

文档提到了能够创建自定义组件： http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

我尝试过：

<BigCalendar
  events={this.state.bookings}
  step={60}
  timeslots={1}
  defaultView='week'
  defaultDate={new Date()}
  min={new Date(this.state.today.getFullYear(),this.state.today.getMonth(),this.state.today.getDate(),8)}
  components={{
    event: <EventComponent />
  }}
/>

EventComponent的位置是：

class EventComponent extends React.Component {
  render() {
    return <h1>here we go!</h1>
  }
}

但我得到的错误是：

Warning: Failed prop type: Invalid prop `components.event` of type ReactElement supplied to `Calendar`,expected an element type (a string or a ReactClass).
    in Calendar (created by Uncontrolled(Calendar))
    in Uncontrolled(Calendar) (at calendar.jsx:50)
    in div (at calendar.jsx:48)
    in Calendar (created by RouterContext)
    in div (at App.js:17)
    in div (at App.js:15)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router (at index.js:27)
    in Provider (at index.js:26)

和

Unhandled rejection Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `DaySlot`.
    at invariant (http://localhost:3000/static/js/bundle.js:11534:16)
    at instantiateReactComponent (http://localhost:3000/static/js/bundle.js:25911:24)
    at instantiateChild (http://localhost:3000/static/js/bundle.js:25716:29)
    at http://localhost:3000/static/js/bundle.js:25743:17
    at traverseAllChildrenImpl (http://localhost:3000/static/js/bundle.js:27459:6)
    at traverseAllChildren (http://localhost:3000/static/js/bundle.js:27554:11)

那我该怎么办？

你必须改变这个部分：

components={{
    event: <EventComponent />
  }}

有了这个：

components={{
    event: EventComponent
  }}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!