reactjsに外部javascriptライブラリを含めるには

Question

私は、外部のjavascriptライブラリを反応プロジェクトにどのように含めることができるかを知りたいと思います。例として、jspdfライブラリをインポートする：https://github.com/MrRio/jsPDF/blob/master/jspdf.jsと私のreactjsアプリでそれを使用します。

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ファイルにコピーして、pdfConverter.jsPDFの代わりにjsPDFを呼び出します。確かに正しい方法ではありませんが、ライブラリをインポートして使用することはできません。

私が間違っていることを教えてください。これをどのように修正できますか？私は（私のファイルにソースをコピー）私の醜いソリューションを使用していたとき はあなたに

-EDIT-

をありがとう私は、次の操作を行う必要がありました：

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

そして、それは働いていました完全に、私が非常に大きなファイルを持っていることを期待してください

@ダニージョリーから提案された解決策の後、私は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してみてください：コンバータが明らかに

[OK]をコンストラクタではありません、私は正しいことをインポートしていないよ：jsPDFが

TypeError例外を定義されていないがまたは正しい方法ではない。 私は間違っていますか？

Answer 1

まず、ソースファイルを使用しないでください。これは古い私が知っている

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

Answer 2

：ただ、他のパッケージのようなnpm install jspdf --save、そして第二にvar pdfConverter = require('jspdf');

でそれをインポートするには、あなたは、この行の（）var doc = new pdfConverter.jsPDF('p','pt');

このような何かを逃しています誰かが完全な作業サンプルを投稿した場合に役立つと思いました。これは、出発点として、この他のポストを使用して、これを理解するために私にしばらく時間がかかった：

​​

を使用すると、以下の次にあなたのApp.jsを上書きし、作成反応するアプリを使用していると仮定すると...

import React, { Component } from 'react'; 
import pdfConverter from 'jspdf'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    this.toDataUrl = this.toDataUrl.bind(this); 
    } 

    toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
     callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
    } 

    onClick() { 
     var doc = new pdfConverter('p','pt','letter'); 
     //console.log(doc.getFontList()); 
     this.toDataUrl('background.jpg', function(base64Img) { 
     var imgData = base64Img; 
     console.log(imgData); 
     console.log('Adding to doc.'); 
     doc.addImage(imgData, 'JPEG', 0, 0, 612, 792); 
     console.log('Image added.'); 
     doc.setFont('Times', 'Roman'); 
     doc.setFontSize(22); 
     doc.text(20, 50, 'Park Entry Ticket'); 
     doc.setFontSize(16); 
     doc.text(20, 80, 'Address1: '); 
     doc.text(20, 100, 'Address2: '); 
     doc.text(20, 120, 'Entry Date & time: '); 
     doc.text(20, 140, 'Expiry date & time: '); 
     console.log('About to save'); 
     doc.save("test.pdf"); 
     }); 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
      <input type='button' 
     onClick={this.onClick} value="Print"/> 
     </p> 
     </div> 
    ); 
    } 
} 

export default App;