如何在 reactjs 中包含外部 JavaScript 库

Question

我想知道如何在 React 项目中包含外部 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 is not a function 。

为了让它工作，我做了一些丑陋的事情，我将 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 is not a constructor 这意味着我必须导入来自包的 jsPDF，而不仅仅是 jspdf？

然后我试了

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

ReferenceError：未定义 jsPDF

类型错误：转换器不是构造函数

好吧，显然，我没有导入正确的东西或不正确的方式。我做错了什么？

原文由 FLCcrakers 发布，翻译遵循 CC BY-SA 4.0 许可协议

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');

原文由 dannyjolie 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您在 /public/index.html 中包含外部 js 文件链接，则可以使用带有 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());
});

原文由 Jason Kao 发布，翻译遵循 CC BY-SA 4.0 许可协议