`$（...）。fullCalendar不是一个函数在React

Question

所以我已经阅读了大约15个不同的文章，有类似的问题，但他们似乎都是由不正确加载jQuery或不正确地加载fullcalendar造成的。但是，我知道我正在将两者都加载到我的组件中（无论我是否正确地进行操作，我都不确定）。我在package.json中使用fullcalendar npm。

我的组件：

import React from 'react'; 
import moment from 'moment'; 
import fc from 'fullcalendar'; 

export default class DailyEvents extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
     } 
    } 

    componentDidMount() { 
     console.log(fc) 
     console.log($('#calendar')) 
     $('#calendar').fullCalendar(); 
    } 

    render() { 
     return (
      <div id="calendar"></div> 
     ); 
    } 
} 

我从console.log(fc)得到的输出是：

Object {version: "3.4.0", internalApiVersion: 9, views: Object, intersectRanges: function, applyAll: function…} 
AgendaView:function() 
BasicView:function() 
Calendar:function (el, overrides) 
Class:function Class() 
CoordCache:function (options) 
DayGrid:function() 
DayTableMixin:Object 
DragListener:function (options) 
EmitterMixin:Object 
Grid:function (view) 
ListenerMixin:Object 
Model:function() 
MonthView:function() 
Promise:Object 
RenderQueue:function (waitsByNamespace) 
Scroller:function (options) 
TaskQueue:function() 
TimeGrid:function() 
View:function (calendar, viewSpec) 
applyAll:function applyAll(functions, thisObj, args) 
capitaliseFirstLetter:function capitaliseFirstLetter(str) 
compareByFieldSpec:function compareByFieldSpec(obj1, obj2, fieldSpec) 
compareByFieldSpecs:function compareByFieldSpecs(obj1, obj2, fieldSpecs) 
computeGreatestUnit:function computeGreatestUnit(start, end) 
createObject:function createObject(proto) 
cssToStr:function cssToStr(cssProps) 
dataAttrPrefix:"" 
datepickerLocale:function (localeCode, dpLocaleCode, dpOptions) 
debounce:function debounce(func, wait, immediate) 
divideDurationByDuration:function divideDurationByDuration(dur1, dur2) 
divideRangeByDuration:function divideRangeByDuration(start, end, dur) 
durationHasTime:function durationHasTime(dur) 
flexibleCompare:function flexibleCompare(a, b) 
formatDate:function formatDate(date, formatStr) 
formatRange:function formatRange(date1, date2, formatStr, separator, isRTL) 
getClientRect:function getClientRect(el, origin) 
getContentRect:function getContentRect(el, origin) 
getOuterRect:function getOuterRect(el, origin) 
getScrollbarWidths:function getScrollbarWidths(el) 
htmlEscape:function htmlEscape(s) 
internalApiVersion:9 
intersectRanges:function intersectRanges(subjectRange, constraintRange) 
intersectRects:function intersectRects(rect1, rect2) 
isBgEvent:function isBgEvent(event) 
isInt:function isInt(n) 
locale:function (localeCode, newFcOptions) 
locales:Object 
log:function() 
moment:function() 
multiplyDuration:function multiplyDuration(dur, n) 
oldMomentFormat:function oldMomentFormat(mom, formatStr) 
parseFieldSpecs:function parseFieldSpecs(input) 
pluckEventDateProps:function pluckEventDateProps(event) 
preventDefault:function preventDefault(ev) 
proxy:function proxy(obj, methodName) 
queryMostGranularFormatUnit:function queryMostGranularFormatUnit(formatStr) 
sourceFetchers:Array(0) 
sourceNormalizers:Array(0) 
touchMouseIgnoreWait:500 
version:"3.4.0" 
views:Object 
warn:function() 
__proto__:Object 

所以我敢肯定这是正确的。

而且我从console.log($('#calendar'))得到的是：

[div#calendar, context: document, selector: "#calendar"] 
0:div#calendar 
context:document 
length:1 
selector:"#calendar" 
__proto__:Object(0) 

这看起来不错对我来说太。

我不知道我要去哪里错了...

编辑：

的解决方案是将以下添加到您的插件，webpack.config.js：

new webpack.ProvidePlugin({ 
    $: "jquery", 
    "window.jQuery": "jquery", 
    "moment": "moment" 
}) 

我不明白，但https://github.com/angular-ui/ui-calendar/issues/349#issuecomment-250865512进一步阅读。

Answer 1

我认为这与webpack配置有关。

您应该：

• 声明jQuery和fullCalendar为的外部和全球将它们添加
• 使用此配置https://github.com/angular-ui/ui-calendar/issues/349#issuecomment-250865512