`$(...).fullCalendar 不是 React 中的函数`

Posted

技术标签:

【中文标题】`$(...).fullCalendar 不是 React 中的函数`【英文标题】:`$(...).fullCalendar is not a function` in React 【发布时间】:2017-10-07 03:22:22 【问题描述】:

所以我已经阅读了大约 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 进一步阅读。

【问题讨论】:

更好地使用refs? ***.com/questions/28662624/… 最初使用参考。结果相同。我将其更改为 id 以确保我没有搞砸 jquery 使用 refs 会尝试解决查找元素的问题,对吧?但我显然找到了控制台输出所指示的元素 我不太确定,但这可能是 webpack 的问题。这是我发现的另一篇帖子***.com/questions/39321399/… 【参考方案1】:

我认为这与 webpack 配置有关。

你应该:

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

【讨论】:

以上是关于`$(...).fullCalendar 不是 React 中的函数`的主要内容,如果未能解决你的问题,请参考以下文章

为啥在 fullcalendar 事件上设置 backgroundColor 只是更改点颜色而不是设置背景颜色?

Angular UI-Calendar TypeError:calendar.fullCalendar 不是函数

FullCalendar:在新选项卡/窗口中打开 gcal 事件

Fullcalendar - 逆背景

编辑事件渲染()后的fullcalendar v5不刷新

FullCalendar活动弹出按钮单击“不工作”