[英]Access non es6 npm module functions within JSX file
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
方式吗?
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();
}
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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.