Question

我想使用我最近安装的模块。我想在jsx文件中使用它，但我不知道如何“导入”它。在这个模块的文档中没有这样做的例子，我认为它只是如何使用它的常识 - 我无法找到/没有的知识。

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

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

Answer 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插件。

您需要在<head>的{{1}}中添加jquery和rangelider的脚本标记。

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

index.html

您需要在<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

这应该是让它运作所需的一切！

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

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

Answer 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。

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

2 个答案: