wake-up-neo.com

Wie importiere ich ein Javascript-Paket aus einem cdn/script-Tag in React?

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

javascripthtmlnode.jsreactjsecmascript-6
8
Jeremy Herzog

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;
21
Jeremy Herzog

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

1
Aaron Newton

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.

1
vsr

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. _

0
UIguy89