所以我已經閱讀了大約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'? http://stackoverflow.com/questions/28662624/reactjs-componentdidmount-render –
最初使用的參考。同樣的結果。我將它改爲id以確保我沒有用jquery搞砸 – Doug
使用refs會嘗試解決查找元素,對嗎?但我顯然找到了我的控制檯輸出顯示的元素 – Doug