Ich möchte dieses Javascript-Paket in React importieren
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>
Es gibt jedoch kein NPM-Paket, daher kann ich es nicht als solches importieren:
import dwolla from 'dwolla'
oder
import dwolla from 'https://cdn.dwolla.com/1/dwolla.js'
also wann immer ich es versuche
dwolla.configure(...)
Ich bekomme eine Fehlermeldung, dass dwolla nicht definiert ist. Wie löse ich das?
Vielen Dank
Wechseln Sie zur Datei index.html und importieren Sie das Skript
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>
Legen Sie dann in der Datei, in die dwolla importiert wird, eine Variable fest
const dwolla = window.dwolla;
Diese Frage wird älter, aber ich habe einen schönen Weg gefunden, dies mit der react-helmet
-Bibliothek anzugehen, die meiner Meinung nach idiotischer für die Funktionsweise von React ist. Ich habe es heute verwendet, um ein Problem ähnlich Ihrer Dwolla-Frage zu lösen:
import React from "react";
import Helmet from "react-helmet";
export class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
myExternalLib: null
};
this.handleScriptInject = this.handleScriptInject.bind(this);
}
handleScriptInject({ scriptTags }) {
if (scriptTags) {
const scriptTag = scriptTags[0];
scriptTag.onload = () => {
// I don't really like referencing window.
console.log(`myExternalLib loaded!`, window.myExternalLib);
this.setState({
myExternalLib: window.myExternalLib
});
};
}
}
render() {
return (<div>
{/* Load the myExternalLib.js library. */}
<Helmet
script={[{ src: "https://someexternaldomain.com/myExternalLib.js" }]}
// Helmet doesn't support `onload` in script objects so we have to hack in our own
onChangeClientState={(newState, addedTags) => this.handleScriptInject(addedTags)}
/>
<div>
{this.state.myExternalLib !== null
? "We can display any UI/whatever depending on myExternalLib without worrying about null references and race conditions."
: "myExternalLib is loading..."}
</div>
</div>);
}
}
Die Verwendung von this.state
bedeutet, dass React automatisch den Wert von myExternalLib überwacht und das DOM entsprechend aktualisiert.
Bildnachweis: https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211
Sie können keine Module von einer URL anfordern oder importieren.
ES6: Modul aus URL importieren
Sie können eine HTTP-Anforderung stellen, um den Skriptinhalt abzurufen und auszuführen, wie in der Antwort für wie von URL in Node.js angefordert
Dies ist jedoch eine schlechte Lösung, da Ihre Code-Kompilierung von einem externen HTTP-Aufruf abhängen würde.
Eine gute Lösung wäre, die Datei in Ihre Codebase herunterzuladen und von dort zu importieren. Sie können die Datei für git festlegen, wenn sich die Datei nicht viel ändert und dies erlaubt ist. Andernfalls könnte ein Build-Schritt die Datei herunterladen.
Fügen Sie das Skript-Tag in Ihre index.html ein. Wenn Sie Webpack verwenden, können Sie dieses Webpack-Plugin https://webpack.js.org/plugins/provide-plugin/ verwenden. _