it-swarm.com.ru

Как импортировать пакет javascript из тега cdn / script в React?

Я хотел бы импортировать этот пакет 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 не определена. Как мне это решить?

Спасибо

8
Jeremy Herzog

Перейдите в файл index.html и импортируйте скрипт 

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

Затем в файле, куда импортируется dwolla, установите его в переменную

const dwolla = window.dwolla;
21
Jeremy Herzog

Этот вопрос стареет, но я нашел хороший способ подойти к нему с помощью библиотеки react-helmet, которая, на мой взгляд, более идиоматична для работы React. Я использовал это сегодня, чтобы решить проблему, похожую на ваш вопрос Дволлы:

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

Что вы можете сделать, это сделать HTTP-запрос, чтобы получить содержимое скрипта и выполнить его, как в ответе на как запросить URL в Node.js

Но это было бы плохим решением, поскольку компиляция вашего кода зависела бы от внешнего HTTP-вызова.

Хорошим решением было бы загрузить файл в вашу кодовую базу и импортировать его оттуда. Вы можете зафиксировать файл в git, если файл не сильно изменился и ему разрешено это делать. В противном случае этап сборки может загрузить файл.

1
vsr

Добавьте тег script в ваш index.html и, если вы используете Webpack, вы можете использовать этот плагин webpack https://webpack.js.org/plugins/provide-plugin/

0
UIguy89