如何在reactjs中包含外部JavaScript库

Question

我想知道如何在反应项目中包含一个外部JavaScript库.例如,我想导入jspdf库:https:  //github.com/MrRio/jsPDF/blob/master/jspdf.js并在我的reactjs应用程序中使用它.

到目前为止,我试图像这样使用require: 

let React = require('react');
let { Spacing, Typography } = Styles;
let DoughnutChart = require("react-chartjs").Doughnut;
let Chart = require('react-google-charts').Chart;
let { StylePropable, StyleResizable } = Mixins;
let EditableDiv = require('../EditableDiv.jsx');
//some other library
//the library that matter for me
var pdfConverter = require('../utils/jspdf.source.js');

//then I have my classical react code which works and a function to generate ad pdf
_generatePdf: function(){
    console.log('Genrating pdf');
    var doc = new pdfConverter.jsPDF('p','pt');
    var img = new Image();
}

我有以下错误:  TypeError:pdfConverter.jsPDF不是一个函数.

为了使它工作,我做了一些丑陋的东西,我将jspdf-source.js的源代码复制到我的react.jsx文件中,然后只调用jsPDF而不是pdfConverter.jsPDF.它绝对没有正确的方法,但无法成功导入和使用该库.

你能告诉我我做错了什么以及如何纠正这个问题？谢谢

-编辑-

当我使用我丑陋的解决方案(将源复制到我的文件中)时,我只需要执行以下操作:

var doc = new jsPDF('p','pt);

它工作得很好,期望我有一个非常大的文件

在@dannyjolie bellow建议的解决方案之后,我直接从npm包导入了jspdf,但我仍然无法使用该库.我尝试了以下代码导致错误:

var pdfConverter = require('jspdf');
var converter = new pdfConverter();
var doc = converter.jsPDF('p', 'pt');

TypeError:pdfConverter不是构造函数 意味着我必须导入来自包的jsPDF,而不仅仅是jspdf？

然后我试试

let pdfConverter = require('jspdf');
var converter = pdfConverter.jsPDF;
var doc = new converter('p', 'pt');

ReferenceError:未定义jsPDF

TypeError:converter不是构造函数

好吧,显然,我没有正确的方式进口正确的东西.我做错了什么？

Answer 1

首先,不要使用源文件.只是npm install jspdf --save像任何其他程序包,并与导入var pdfConverter = require('jspdf');

其次,你在这一行中缺少一个() var doc = new pdfConverter.jsPDF('p','pt');

做这样的事情:

var converter = new pdfConverter();
var doc = converter.jsPDF('p', 'pt');

Answer 2

如果您在中包含外部js文件链接/public/index.html，则可以使用带window前缀的外部库。

以JQuery为例。将以下行放入您的/public/index.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

像这样在项目中使用它：

window.$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});