在JSX文件中访问非es6 npm模块功能

Question

I want to use a module that I recently npm installed. 我想使用我最近npm安装的模块。 I want to use it from within a jsx file but I don't know how to 'import' it if you will. 我想从jsx文件中使用它，但是如果您愿意，我不知道如何“导入”它。 There are no examples doing this in the documentation for this module and I assume it is just common knowledge on how to use it - knowledge I can't find / don't have. 在此模块的文档中没有执行此操作的示例，并且我认为这只是有关如何使用它的常识-我找不到/没有的知识。

I don't think this module has any 'exports'. 我认为该模块没有任何“出口”。 It just has a dist folder with the .js source code inside of it. 它只有一个dist文件夹，其中带有.js源代码。

How do I access this module's functions from within my jsx file? 如何从jsx文件中访问此模块的功能？ Do I need to import it some how? 我需要一些import方式吗？

Answer 1

The usage docs for rangeslider.js contain a code example: 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>

Using jquery plugins in React is kind of an anti-pattern. 在React中使用jquery插件是一种反模式。 Most of the time, people in the community will port old jquery libraries to React components. 大多数时候，社区中的人们会将旧的jquery库移植到React组件。 Here is a React component for RangeSlider . 这是RangeSlider的React组件。

But you can still use the old jquery plugin. 但是您仍然可以使用旧的jquery插件。

You'll need to include the script tag for jquery and rangeslider in the <head> of your index.html . 您需要在index.html的<head>中包括用于jquery和rangelider的脚本标记。

Then, in your component, you'll need to add the range input: 然后，在组件中，您需要添加范围输入：

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

And you'll need to initialize the plugin in the componentDidMount lifecycle method: 并且您需要在componentDidMount生命周期方法中初始化插件：

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

That should be all you need to get it working! 那应该是您使其工作所需的全部！

You could also look into using a ref for your input so that you could do something like: 您还可以考虑使用ref作为输入，以便可以执行以下操作：

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

Answer 2

It depends on how the library you are trying to import exports its code. 这取决于您要导入的库如何导出其代码。 If they have a module definition block, then you can try importing it using either import or require syntax in your module. 如果他们有一个模块定义块，那么你可以尝试使用或者将其导入import或require您的模块中的语法。 Generally you can spot this by looking at the source for a code block that looks something like 通常，您可以通过查看源代码中看起来像这样的代码块来发现这一点

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

If the library just adds functions/variables to the global namespace, then you can include the library with a <script> tag in the HTML, and call those functions directly like window.someFunction from inside your component. 如果库只是将函数/变量添加到全局名称空间，则可以在HTML中包含带有<script>标记的库，然后直接从组件内部调用这些函数，例如window.someFunction 。

在JSX文件中访问非es6 npm模块功能

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-02-28 21:21:09

解决方案2
1 2018-02-28 21:03:30

在JSX文件中访问非es6 npm模块功能

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-02-28 21:21:09

解决方案2 1 2018-02-28 21:03:30

解决方案1
2 已采纳 2018-02-28 21:21:09

解决方案2
1 2018-02-28 21:03:30