web-dev-qa-db-ja.com

Reactのcdn / scriptタグからjavascriptパッケージをインポートするにはどうすればよいですか？

このjavascriptパッケージをReactにインポートしたい

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

ただし、NPMパッケージはないため、次のようにインポートすることはできません。

import dwolla from 'dwolla'

または

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

だからいつでも

dwolla.configure(...)

Dwollaが未定義であるというエラーが表示されます。これをどうやって解決しますか？

ありがとう

javascripthtmlnode.jsreactjsecmascript-6
18
Jeremy Herzog

Index.htmlファイルに移動して、スクリプトをインポートします

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

次に、dwollaがインポートされるファイルで、変数に設定します

const dwolla = window.dwolla;
36
Jeremy Herzog

この質問は古くなってきていますが、react-helmet私が感じているライブラリは、Reactが機能するようになっています。私はあなたの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>);
    }
}

の用法 this.stateは、ReactがmyExternalLibの値を自動的に監視し、DOMを適切に更新することを意味します。

クレジット： https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211

1
Aaron Newton

URLからモジュールを要求またはインポートすることはできません。

ES6：URLからモジュールをインポート

Node.jsのURLから要求する方法 の答えのように、スクリプトのコンテンツを取得して実行するHTTPリクエストを作成する

ただし、コードのコンパイルは外部HTTP呼び出しに依存するため、これは悪い解決策になります。

良い解決策は、ファイルをコードベースにダウンロードし、そこからインポートすることです。ファイルがあまり変化せず、許可されている場合は、ファイルをgitにコミットできます。そうしないと、ビルドステップでファイルがダウンロードされる可能性があります。

1
vsr

Index.htmlにスクリプトタグを追加します。Webpackを使用している場合は、このwebpackプラグインを使用できます https://webpack.js.org/plugins/provide-plugin/

0
UIguy89