React.js應用程序流錯誤

Question

我試圖理解以下兩個文檔流程之間的區別，以及為什么第一個文檔有效而第二個文檔無效。

因此，有效的版本只有文件：

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-> route.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）route.js（未顯示所有代碼）

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

（3）app.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

我對這個問題感到困惑，無法理解我的一生，為什么分流不起作用。 任何幫助將不勝感激。

Answer 1

嘗試

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