web-dev-qa-db-fra.com

Comment importer un package javascript à partir d'une balise cdn/script dans React?

J'aimerais importer ce paquet javascript dans React

<script src="https://cdn.dwolla.com/1/dwolla.js"></script>

Cependant, il n'y a pas de package NPM, je ne peux donc pas l'importer en tant que tel:

import dwolla from 'dwolla'

ou

import dwolla from 'https://cdn.dwolla.com/1/dwolla.js'

alors quand j'essaie

dwolla.configure(...)

Je reçois une erreur en disant que dwolla est indéfini. Comment résoudre ce problème?

Merci

javascripthtmlnode.jsreactjsecmascript-6
8
Jeremy Herzog

Accédez au fichier index.html et importez le script. 

<script src="https://cdn.dwolla.com/1/dwolla.js"></script>

Ensuite, dans le fichier où dwolla est importé, définissez-le sur une variable

const dwolla = window.dwolla;
21
Jeremy Herzog

Cette question prend de l’âge, mais j’ai trouvé un bon moyen d’aborder la question en utilisant la bibliothèque react-helmet qui, à mon avis, est plus idiomatique par rapport au fonctionnement de React. Je l'ai utilisé aujourd'hui pour résoudre un problème similaire à votre question Dwolla:

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

L'utilisation de this.state signifie que React surveillera automatiquement la valeur de myExternalLib et mettra à jour le DOM de manière appropriée.

Crédit: https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211

1
Aaron Newton

Vous ne pouvez pas exiger ou importer des modules à partir d'une URL.

ES6: module d'importation depuis l'URL

Ce que vous pouvez faire est de faire une requête HTTP pour obtenir le contenu du script et l'exécuter, comme dans la réponse pour comment demander une URL dans Node.js

Mais ce serait une mauvaise solution car la compilation de votre code dépendrait d'un appel HTTP externe.

Une bonne solution serait de télécharger le fichier dans votre base de code et de l'importer à partir de là. Vous pouvez valider le fichier dans git s'il ne change pas beaucoup et qu'il est autorisé à le faire. Sinon, une étape de compilation pourrait télécharger le fichier.

1
vsr

Ajoutez la balise script dans votre index.html et si vous utilisez Webpack, vous pouvez utiliser ce plugin Webpack https://webpack.js.org/plugins/provide-plugin/

0
UIguy89