在React.js應用程序中添加其他庫

Question

我正在我的應用程序中添加圖像滑塊庫 。 它正在工作，但我不確定這是否是唯一的方法。

在我的react.js文件中，我這樣做：

componentDidMount() {
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'js/banner.js';
    head.appendChild(script);
}

在banner.js文件中，我添加了滑塊的代碼，並將庫的代碼作為腳本標記添加到index.html文件中。 我知道它多次添加js文件，但我不知道添加它的另一種方法，它工作得很好，但我不確定這是正確的方法

Answer 1

安迪的評論是正確的，您應該盡可能通過npm包含您的庫。 為此，請谷歌搜索該軟件包以在npm注冊表中找到其名稱。

然后，您可以運行npm install --save banner （假設找到的軟件包名稱為banner ）將庫自動保存到package.json 。 這樣，您npm install運行npm install或npm update ，都會通過npm該軟件包。

在創建React組件的.jsx文件中，您可以將其添加到最頂部：

// if you're not using ES6
const banner = require('banner') 
// if you are
import * as banner from 'banner';
// if the package exports modules
import {banner} from 'banner';

如果該庫在npm注冊表中不作為軟件包存在，您仍然可以以幾乎相同的方式執行此操作。 您只需要將庫的.js文件添加到您的項目中，並使用相對路徑進行require / import （即require('../../vendor/banner.js') ）。