React.js应用程序stream错误
我想了解以下两个文档stream程之间的区别，以及为什么第一个工作，第二个工作不起作用。
所以工作的版本只有文件：
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')); 当我将其分解成下面的stream程时，它停止工作：
main.js – > routes.js – > app.js
（1）新的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 MAIN.JS从第一个stream程，除了最后一行
从：
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
我对这个问题感到困惑，无法想象为什么stream动分stream不起作用。 任何帮助将不胜感激。
尝试
import $ from 'jquery'; import "jquery-ui"; import "fullcalendar/dist/fullcalendar.min.css"; import fullCalendar from 'fullcalendar';
在那里，您的工作代码与JSX >>> GIST App.js您可以导入此代码：
import App from './components/App' <Route path="/" component={App} />
不要忘记检查你的模块;
npm install -S jquery jquery-ui fullcalendar