Question

我想在React中导入这个javascript包

<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未定义。我该如何解决这个问题？

由于

Answer 1

转到index.html文件并导入脚本

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

然后，在导入dwolla的文件中，将其设置为变量

const dwolla = window.dwolla;

Answer 2

您不能要求或从URL导入模块。

ES6: import module from URL

您可以做的是发出HTTP请求以获取脚本内容＆amp;执行它，如how to require from URL in Node.js

的答案

但这可能是一个糟糕的解决方案，因为您的代码编译将依赖于外部HTTP调用。

一个好的解决方案是将文件下载到您的代码库并从那里导入。如果文件没有太大变化，你可以将文件提交给git＆amp;被允许这样做。否则，构建步骤可以下载文件。

Answer 3

这个问题越来越老了，但是我发现使用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

Answer 4

打字稿开发人员

const newWindowObject = window as any; //强制转换为任意类型

let pushNotification = newWindowObject.OneSignal; //现在可以在打字稿中访问OneSignal对象了，没有错误

Answer 5

在index.html中添加脚本标签，如果您正在使用Webpack，则可以使用此webpack插件https://webpack.js.org/plugins/provide-plugin/

如何从React中的cdn / script标签导入javascript包？

5 个答案: