访问JSX文件中的非es6 npm模块函数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了访问JSX文件中的非es6 npm模块函数相关的知识，希望对你有一定的参考价值。
我想使用我最近安装的模块。我想在jsx文件中使用它，但我不知道如何“导入”它。在这个模块的文档中没有这样做的例子，我认为它只是如何使用它的常识 - 我无法找到/没有的知识。
我不认为这个模块有任何“出口”。它只有一个带有.js源代码的dist文件夹。
如何从我的jsx文件中访问此模块的功能？我需要import一些怎么样？
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>的index.html中包含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();
}
这取决于您尝试导入的库如何导出其代码。如果他们有模块定义块，那么您可以尝试使用模块中的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模块函数的主要内容，如果未能解决你的问题，请参考以下文章