尝试将 React-DateRangePicker 集成到 React 项目时出错答案

【问题标题】：Error while trying to integrate React-DateRangePicker into React Project尝试将 React-DateRangePicker 集成到 React 项目时出错
【发布时间】：2015-11-02 14:41:18
【问题描述】：

目前正在使用 ReactJs 和 Fluxible 架构构建 Web 应用程序。在尝试将 React-daterangepicker 模块集成到我的项目中时，我遇到了以下错误，我无法追踪其来源。

$.fn.daterangepicker = function(options, callback) {
                         ^
TypeError: Cannot set property 'daterangepicker' of undefined
    at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26

这是我的 DatePicker 组件，我按照 github 演示完成了完全相同的步骤。

'use strict';
var React = require('react/addons');
var moment = require('moment');
var DateRangePicker = require('react-bootstrap-daterangepicker');
import DefaultMixin from '../mixins/DefaultMixin';

module.exports = React.createClass({

    mixins: [DefaultMixin],

    render() {

        return (
            <DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
                <div>Click Me To Open Picker!</div>
            </DateRangePicker>
        );

    }

});

什么可能导致此错误？谷歌搜索没有结果，过去几个小时我一直在努力解决这个问题。

【问题讨论】：

似乎其他人在服务器端渲染方面也有类似的问题：github.com/skratchdot/react-bootstrap-daterangepicker/issues/14
@MichaelParker 你是对的，他们似乎遇到了我面临的同样问题。但即使有“hack”建议，错误仍然出现。
很遗憾，我不知道该告诉你什么。似乎在尝试进行服务器端渲染时，jQuery 依赖项在某处丢失了，至少这是错误告诉我的。
我也遇到了同样的问题，希望有人能加入。“未捕获的类型错误：无法设置未定义的属性 'daterangepicker'”

标签： javascript reactjs momentjs daterangepicker fluxible

【解决方案1】：

TL;DR：这不是反应问题，您需要在加载反应文件之前加载 jQuery。

让我们解构您的错误消息：

$.fn.daterangepicker = function(options, callback) {
                     ^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26

我最感兴趣的是第一部分Cannot set property 'daterangepicker' of undefined...

这是因为$.fn 正在返回未定义。

试试这个：

在你需要 react 之前，你应该需要 jquery：

var $ = require('jquery');
var React = require('react/addons');

【讨论】：

【解决方案2】：

似乎react-bootstrap-daterangepicker 模块需要 jQuery 才能在全球范围内以$ 的形式使用。在加载模块之前尝试在页面上包含 jQuery。

【讨论】：