访问 JSX 文件中的非 es6 npm 模块函数答案

【问题标题】：Access non es6 npm module functions within JSX file访问 JSX 文件中的非 es6 npm 模块函数
【发布时间】：2018-02-28 20:45:39
【问题描述】：

我想使用我最近安装的 npm 模块。我想在 jsx 文件中使用它，但如果你愿意，我不知道如何“导入”它。该模块的文档中没有这样做的示例，我认为这只是关于如何使用它的常识——我找不到/没有的知识。

我不认为这个模块有任何“出口”。它只有一个 dist 文件夹，其中包含 .js 源代码。

如何从我的 jsx 文件中访问此模块的功能？我需要import吗？

【问题讨论】：

库如何导出其代码？它是否在全局 window 对象上创建函数？或者更好 - 您尝试使用的模块是什么？
没关系 :) 只是想获得尽可能多的信息来帮助你。在下面查看 Chase 的答案。

标签： reactjs import ecmascript-6 jsx

【解决方案1】：

rangeslider.js 的使用文档包含一个代码示例：

<script src="jquery.min.js"></script>
<script src="rangeslider.min.js"></script>
<script>
    // Initialize a new plugin instance for all
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider();

    // Destroy all plugin instances created from the
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider('destroy');

    // Update all rangeslider instances for all
    // e.g. $('input[type="range"]') elements.
    // Usefull if you changed some attributes e.g. `min` or `max` etc.
    $('input[type="range"]').rangeslider('update', true);
</script>

在 React 中使用 jquery 插件是一种反模式。大多数时候，社区中的人们会将旧的 jquery 库移植到 React 组件中。这是React component for RangeSlider。

但是你仍然可以使用旧的 jquery 插件。

您需要在index.html 的<head> 中包含jquery 和rangeslider 的脚本标签。

然后，在您的组件中，您需要添加范围输入：

<input
    type="range"
    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
    ref={ref => this.range = ref}
>

你需要在componentDidMount生命周期方法中初始化插件：

componentDidMount() {
    $('input[type="range"]').rangeslider();
}

这应该就是让它工作所需的全部内容！

您还可以考虑使用ref 作为您的输入，以便您可以执行以下操作：

componentDidMount() {
    this.range.rangeslider();
}

【讨论】：

这是正确答案。我没有意识到这是一个 jquery 插件。我强烈建议使用 react-rangeslider 库而不是旧的 jQuery 插件。正如这个答案所暗示的那样，jQuery 和 React 并不是为了一起工作而设计的。
还有一个问题...如果我确实需要在我的 html 中包含 script 标签来加载这个库，那么这个库有一个 npm 包有什么意义？
@connected_user 这样你就可以做一个或另一个，但不能同时做。
@ChaseDeAnda 那么我将如何使用它的 npm 模块导入它？
@ChaseDeAnda 建议的库有关于如何导入它的文档：github.com/whoisandy/react-rangeslider

【解决方案2】：

这取决于您尝试导入的库如何导出其代码。如果他们有一个模块定义块，那么您可以尝试在您的模块中使用import 或require 语法导入它。通常，您可以通过查看类似于

的代码块的源代码来发现这一点

if(typeof define === "function" && define.amd) {
    define(["postal"], factory);
  } else if(typeof module === "object" && module.exports) {
    module.exports = factory(require("postal"));
  } else {
    root.myModule = factory(root.postal);
  }

如果库只是将函数/变量添加到全局命名空间，那么您可以在 HTML 中包含带有 <script> 标记的库，然后像 window.someFunction 从组件内部直接调用这些函数。

【讨论】：