導入一箇舊的ES5模塊在ReactJS組件中使用

Question

我想在新的ReactJS應用程序中使用ES5模塊，並且我很努力地理解如何正確地導入該模塊，使得它內部的主要功能可以被發現並執行。

我正在加載模塊; import 'air-datepicker';

我知道我在這裏做錯了事，對於沒有適當出口的舊圖書館來說，它並不是那麼簡單！

無論如何，那麼我應該能夠使用像這樣的現有的div手動初始化日期選擇器;

$('#myDiv').datepicker(); 

我已經試過進口的多種變化和需要，但我總是得到同樣的錯誤 - 「日期選擇器是不是一個函數」。

我正在試驗的圖書館是air-datepicker。我已經使用npm安裝了模塊，沒有問題，我知道這個庫在沒有React的情況下可以很好地工作，只需在腳本標記中手動加載腳本。我的ReactJS應用程序是使用FB教程頁面中的「create-react-app」創建的基本模板。

Answer 1

那麼，這是我一生中的一天，我永遠不會回來！

問題是由Babel導入順序造成的。導入語句被提起 - 意味着它們在執行任何其他代碼（即我的窗口賦值）之前首先被評估。這是babel中的'by design'。

從我所知道的情況來看，避免巴別塔吊裝的唯一方法是完全避免「導入」，而是使用require。

所以，按照以下順序，當您需要空氣約會器時，全局$將被設置。如果您嘗試'導入'空氣日期選擇器，它將不起作用，因爲Babel將在執行窗口之前評估您的所有導入語句。分配。

import $ from 'jquery'; 
window.$ = $; 
require('air-datepicker'); 

有一個或者這也將工作過的其他兩種方法，但他們都不太理想，因爲他們需要你手動配置的WebPack - 即「噴出」的創建反應的，應用程序配置和單幹...

使用imports-loader;

// only works if you disable no-webpack-loader-syntax 
require("imports?$=jquery!air-datepicker"); 

或者，使用ProvidePlugin，使模塊可用於所有模塊。

Answer 2

你必須給它一個標識符：如果您使用create-react-app

import datepicker from 'air-datepicker'; 

Answer 3

，你應該能夠將其導入像

import 'air-datepicker/dist/css/datepicker.min.css'; 
import 'air-datepicker'; 

如果添加使用<script>標記您的jQuery您的HTML，您需要在空氣揀貨日前添加此行

const $ = window.jQuery; 
const jQuery = window.jQuery; 

如果您使用npm install加入jQuery的，你必須添加這些以下行

import $ from 'jquery'; 
import jQuery from 'jquery'; 
window.$ = $; 
window.jQuery = jQuery; 
//... air-datepicker imports 

確保初始化您componentDidMount或地方你確定元素已經安裝已經內。

componentDidMount() { 
    $('#my-element').datepicker(); 
} 

render() { 
    return <div> 
     <input 
      id="my-element" 
      type='text' 
      className="datepicker-here" 
      data-position="right top" /> 
    </div> 
} 

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.