javascript - 导入旧的 ES5 模块以用于 ReactJS 组件

Question

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

我正在加载模块；import '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>
}