javascript - 导入旧的 ES5 模块以在 ReactJS 组件中使用

Question

我正在尝试在新的 ReactJS 应用程序中使用 ES5 模块，并且我正在努力了解如何正确导入该模块，以便可以找到并执行其中的主要函数。

我正在加载模块； 导入'air-datepicker';

我知道我在这里做错了，而且对于一个没有适当导出的旧库来说，事情并不像这样简单!

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

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

我尝试了导入和要求的多种变体，但总是收到相同的错误 - “datepicker 不是函数”。

我正在试验的库是 air-datepicker 。我已经使用 npm 安装了该模块，没有出现任何问题，并且我知道该库可以在没有 React 的情况下在简单页面上完美地工作，在脚本标签中手动加载脚本。我的 ReactJS 应用程序是使用 FB 教程页面中的“create-react-app”创建的基本模板。

Answer 1

如果您使用create-react-app ，您应该能够像这样导入它

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

如果您使用 <script> 添加 jQuery标签在你的HTML中，你需要在air-datepicker导入之前添加这一行

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>
}