如何使用 webpack 模块捆绑器实现 react-date-range 选择器？答案

【问题标题】：How to implement react-date-range picker with webpack module bundler?如何使用 webpack 模块捆绑器实现 react-date-range 选择器？
【发布时间】：2016-04-03 00:20:20
【问题描述】：

我正在努力使用 webpack 模块捆绑器实现反应日期范围选择器。我已经关注了日期范围选择器 (https://www.npmjs.com/package/react-date-range) 的 npm react 组件之一。如果我尝试使用 webpack 实现，我会遇到一个错误。也就是说，“未捕获的 TypeError：type.toUpperCase 不是函数”。请检查我的以下代码我尝试过的内容，

var React  = require('react');
var DateRange = require('react-date-range');

var Calendarcomponent = React.createClass({
  handleSelect:function(range){
    console.log(range);
  },
  render:function(){
      return (
        <div>
          <DateRange
            onInit={this.handleSelect}
            onchange={this.handleSelect}
          />
        </div>
      )
  }
});

module.exports = Calendarcomponent;

【问题讨论】：

你安装了 pkg moment 吗？
没有@DhavalPatel。如何安装该软件包？
momentjs.com
应该不需要安装moment。它已经是 react-date-range 的依赖项。 github.com/Adphorus/react-date-range/blob/master/… 我认为问题在于 DateRange 不是包的默认导出。你需要使用var DateRange = require('react-date-range').DateRange
@azium: 完美是的，这就是原因

标签： javascript html node.js reactjs npm

【解决方案1】：

DateRange 不是 react-date-range 包的默认导出。

在示例中，请注意导入期间的解构语法：

import { DateRange } from 'react-date-range'

你会在 ES5 ala 中重写这个：

var DateRange = require('react-date-range').DateRange

【讨论】：

谢谢@azium。如何只显示一个日历？
试试var Calendar = require('date-range-picker').Calendar。
嗨@azium。单击外部按钮时如何获取开始和结束日期值？
@Sathya 也许你应该为此提出一个新问题，提供你更新的代码
嗨@azium。我为此提出了一个新问题。 stackoverflow.com/questions/34525835/…

【解决方案2】：

您必须使用react-date-range，如下所述

var DateRange = require('react-date-range').DateRange;

【讨论】：