在JSX文件中訪問非es6 npm模塊功能

Question

我想使用我最近npm安裝的模塊。 我想從jsx文件中使用它，但是如果您願意，我不知道如何“導入”它。 在此模塊的文檔中沒有執行此操作的示例，並且我認為這只是有關如何使用它的常識-我找不到/沒有的知識。

我認為該模塊沒有任何“出口”。 它只有一個dist文件夾，其中帶有.js源代碼。

如何從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組件。 這是RangeSlider的React組件。

但是您仍然可以使用舊的jquery插件。

您需要在index.html的<head>中包括用於jquery和rangelider的腳本標記。

然后，在組件中，您需要添加范圍輸入：

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

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 個解決方案

解決方案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