在React.js应用程序中添加其他库

Question

我在我的react应用程序中添加了图像滑块库。它正在起作用，但我不知道这是否是唯一的办法。

在我的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 install --save banner (假设您找到的包名是banner)自动将库保存到package.json中。这样，每当您运行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'))的相对路径。