如何在reactjs中包含外部JavaScript库 [英] How to include external javascript library in reactjs

问题描述

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

I would like to know how it's possible to include an external javascript library in a react project. For exemple, I would like to import the jspdf library : https://github.com/MrRio/jsPDF/blob/master/jspdf.js and use it in my reactjs app.

到目前为止，我试图像这样使用require：

So far I tried to use require like this : 

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。它绝对没有正确的方法，但无法成功导入和使用该库。

To make it work, I made something ugly, I copy the source of jspdf-source.js into my react.jsx file and just call jsPDF instead of pdfConverter.jsPDF. It's definitly no the right way, but can't succed to import and use the library.

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

Can you tell me what I'm doing wrong and how I can correct this? Thank you

-EDIT -

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

When I was using my ugly solution (copying the source into my file) I just had to do the following :

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

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

And it was working perfectly, expect that I had a very big file

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

After the suggested solution from @dannyjolie bellow, I've imported jspdf directly from the npm package, but I'm still not able to use the library. I tried the following code wich lead to an error:

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

TypeError：pdfConverter不是构造函数
含义I必须导入来自包的jsPDF，而不仅仅是jspdf？

TypeError: pdfConverter is not a constructor Meaning that I have to import the jsPDF coming from the package, not only jspdf ?

然后我尝试

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

ReferenceError：jsPDF未定义

TypeError：转换器不是构造函数

显然，我没有输入正确的东西或者不是正确的方法。
我做错了什么？

Ok obviously, I'm not importing the right thing or not the right way. What I'm doing wrong ?

推荐答案

首先，不要使用源文件。只需 npm install jspdf --save 就像任何其他包一样，并用 var pdfConverter = require（'jspdf'）;

First of all, don't use the source file. Just npm install jspdf --save like any other package, and import it with var pdfConverter = require('jspdf');

其次，你在这行中缺少一个（） var doc = new pdfConverter.jsPDF（'p'，'pt' ）;

Secondly, you're missing a () in this line var doc = new pdfConverter.jsPDF('p','pt');

执行以下操作：

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

这篇关于如何在reactjs中包含外部JavaScript库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！