导入一个旧的ES5模块在ReactJS组件中使用

Question

我想在新的ReactJS应用程序中使用ES5模块，并且我很努力地理解如何正确地导入该模块，使得它内部的主要功能可以被发现并执行。

我正在加载模块; import 'air-datepicker';

我知道我在这里做错了事，对于没有适当出口的旧图书馆来说，它并不是那么简单！

无论如何，那么我应该能够使用像这样的现有的div手动初始化日期选择器;

$('#myDiv').datepicker(); 

我已经试过进口的多种变化和需要，但我总是得到同样的错误 - “日期选择器是不是一个函数”。

我正在试验的图书馆是air-datepicker。我已经使用npm安装了模块，没有问题，我知道这个库在没有React的情况下可以很好地工作，只需在脚本标记中手动加载脚本。我的ReactJS应用程序是使用FB教程页面中的“create-react-app”创建的基本模板。

Answer 1

那么，这是我一生中的一天，我永远不会回来！

问题是由Babel导入顺序造成的。导入语句被提起 - 意味着它们在执行任何其他代码（即我的窗口赋值）之前首先被评估。这是babel中的'by design'。

从我所知道的情况来看，避免巴别塔吊装的唯一方法是完全避免“导入”，而是使用require。

所以，按照以下顺序，当您需要空气约会器时，全局$将被设置。如果您尝试'导入'空气日期选择器，它将不起作用，因为Babel将在执行窗口之前评估您的所有导入语句。分配。

import $ from 'jquery'; 
window.$ = $; 
require('air-datepicker'); 

有一个或者这也将工作过的其他两种方法，但他们都不太理想，因为他们需要你手动配置的WebPack - 即“喷出”的创建反应的，应用程序配置和单干...

使用imports-loader;

// only works if you disable no-webpack-loader-syntax 
require("imports?$=jquery!air-datepicker"); 

或者，使用ProvidePlugin，使模块可用于所有模块。

Answer 2

你必须给它一个标识符：如果您使用create-react-app

import datepicker from 'air-datepicker'; 

Answer 3

，你应该能够将其导入像

import 'air-datepicker/dist/css/datepicker.min.css'; 
import 'air-datepicker'; 

如果添加使用<script>标记您的jQuery您的HTML，您需要在空气拣货日前添加此行

const $ = window.jQuery; 
const jQuery = window.jQuery; 

如果您使用npm install加入jQuery的，你必须添加这些以下行

import $ from 'jquery'; 
import jQuery from 'jquery'; 
window.$ = $; 
window.jQuery = jQuery; 
//... air-datepicker imports 

确保初始化您componentDidMount或地方你确定元素已经安装已经内。

componentDidMount() { 
    $('#my-element').datepicker(); 
} 

render() { 
    return <div> 
     <input 
      id="my-element" 
      type='text' 
      className="datepicker-here" 
      data-position="right top" /> 
    </div> 
} 

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相关问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.