在React.js app

Question

我在我的反应应用中添加了image slider library。它有效，但我不确定这是否是唯一的方法。

在我的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

Andy的评论是正确的，您应该尽可能通过npm包含您的图书馆。要执行此操作，请将软件包google以在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')）。