我试图理解以下两个文档流程之间的区别，以及为什么第一个文档流程起作用而第二个文档流程不起作用。
所以适用的版本只有文件：
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import fullcalendar from 'fullcalendar';
import jqueryUI from 'jquery-ui';
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Application = function (_React$Component) {
_inherits(Application, _React$Component);
function Application() {
_classCallCheck(this, Application);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Application.prototype.render = function render() {
return React.createElement(
'div',
null,
React.createElement(External, null),
React.createElement(Calendar, null)
);
};
return Application;
}(React.Component);
/*
* A simple React component
*/
var Calendar = function (_React$Component2) {
_inherits(Calendar, _React$Component2);
function Calendar() {
_classCallCheck(this, Calendar);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
Calendar.prototype.render = function render() {
return React.createElement('div', { id: 'calendar' });
};
Calendar.prototype.componentDidMount = function componentDidMount() {
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
defaultView:'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
minTime: "07:00:00",
maxTime: "21:00:00",
selectHelper: true,
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: "#f56954", //red
borderColor: "#f56954" //red
},
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: "#f39c12", //yellow
borderColor: "#f39c12" //yellow
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7" //Blue
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
backgroundColor: "#00c0ef", //Info (aqua)
borderColor: "#00c0ef" //Info (aqua)
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/',
backgroundColor: "#3c8dbc", //Primary (light-blue)
borderColor: "#3c8dbc" //Primary (light-blue)
}
],
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
};
return Calendar;
}(React.Component);
var External = function (_React$Component3) {
_inherits(External, _React$Component3);
function External() {
_classCallCheck(this, External);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
External.prototype.render = function render() {
return React.createElement(
'div',
{ id: 'external-events' },
React.createElement(
'h4',
null,
'Draggable Events'
),
React.createElement(
'div',
{ className: 'fc-event' },
'My Event 1'
),
React.createElement(
'div',
{ className: 'fc-event' },
'My Event 2'
),
React.createElement(
'div',
{ className: 'fc-event' },
'My Event 3'
),
React.createElement(
'div',
{ className: 'fc-event' },
'My Event 4'
),
React.createElement(
'div',
{ className: 'fc-event' },
'My Event 5'
),
React.createElement(
'p',
null,
React.createElement('input', { type: 'checkbox', id: 'drop-remove' }),
React.createElement(
'label',
{ 'htmlFor': 'drop-remove' },
'remove after drop'
)
)
);
};
External.prototype.componentDidMount = function componentDidMount() {
$('#external-events .fc-event').each(function () {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
//$(this).draggable({
// zIndex: 999,
// revert: true, // will cause the event to go back to its
// revertDuration: 0 // original position after the drag
//});
});
};
return External;
}(React.Component);
/*
* Render the above component into the div#app
*/
ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));
当我将其拆分为后续流程时，它将停止工作：
main.js - ＆gt; routes.js - ＆gt; app.js
（1）new main.js
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router';
import configureStore from './store/configureStore';
import getRoutes from './routes';
import jQuery from 'jquery';
const store = configureStore(window.INITIAL_STATE);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={getRoutes(store)}/>
</Provider>,
document.getElementById('app')
);
（2）routes.js（并非显示所有代码）
return (
<Route path="/" component={App}>
</Route>
);
}
（3）app.js
SAME AS MAIN.JS来自第一个流程，除了最后一行
自：
ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));
要：
return React.createElement(Application, null);
收到的错误是：
$.fn.fullCalendar = function(options) {
^
TypeError: Cannot set property 'fullCalendar' of undefined
我对这个问题感到困惑，无法想象为什么流动中的分裂不起作用。任何帮助将不胜感激。
答案 0 :(得分：0)
尝试
import $ from 'jquery';
import "jquery-ui";
import "fullcalendar/dist/fullcalendar.min.css";
import fullCalendar from 'fullcalendar';
那里，您使用JSX的工作代码＆gt;＆gt;＆gt; GIST App.js 你可以导入这段代码：
import App from './components/App'
<Route path="/" component={App} />
别忘了检查您的模块;
npm install -S jquery jquery-ui fullcalendar