React.js应用程序流错误

Question

I am trying to understand the difference between the following two document flows, and why the first one works and the second one doesn't work.

So the version that works has just the file:

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'));

When I split this into the follow flow, it stops working:

main.js -> routes.js -> 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 (not all code shown)

 return (
    <Route path="/" component={App}>
    </Route>
  );
}

(3) app.js

SAME AS MAIN.JS from first flow, except for last line

From:

ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));

To:

return React.createElement(Application, null);

The error received is:

 $.fn.fullCalendar = function(options) {
                  ^

TypeError: Cannot set property 'fullCalendar' of undefined

I am baffled by the problem and can not figure for the life of me why the split in flow does not work. Any help would be greatly appreciated.

Answer 1

try

import $ from 'jquery';
import "jquery-ui";
import "fullcalendar/dist/fullcalendar.min.css";
import  fullCalendar  from 'fullcalendar';

there, your working code with JSX >>> GIST App.js u can import this code:

import App from './components/App'

<Route path="/" component={App} />

dont forget to check your modules;

npm install -S jquery jquery-ui fullcalendar