在React组件中使用index.html中包含的脚本

Question

我正在尝试使用我在index.html中的脚本标记中加载的库中的变量来获取我的React组件。 我正常加载它：

<head>
  ...
  <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
  <!-- gives me the 'Plaid' library -->
  ...
  <title>React App</title>
</head>

但是，当我尝试在我的React组件中访问Plaid时，它是未定义的。 我很困惑，因为如果我在它之前放入一个调试器，我仍然可以访问它。 例如，在我的App.js组件中，我有：

componentDidMount() {
  debugger // can access 'Plaid' here
  Plaid // throws error, 'Plaid' is undefined
}

为什么Plaid会抛出错误，即使我可以通过调试器访问它？

Answer 1

问题是Webpack文件是单独捆绑的，与所需的脚本分开。 因此，当您尝试访问全局变量时，它不存在。

如果要使用<script>则必须自己自定义Webpack配置。 这涉及弹出create-react-app并自行管理所有内容。 在你这样做之前备份你的项目，因为在弹出之后就没有回头了！ 第一次运行：

npm run eject

弹出完成后，导航到webpack.config.js并向配置对象添加新密钥：

externals: {

}

externals作用是从CDN（例如Plaid）获取脚本声明的全局变量，并允许它用作项目中的模块。 因此，配置如下：

externals: {
    plaid: 'Plaid'
}

这将从CDN获取全局变量Plaid并将其作为名为plaid的模块提供。 然后你可以在导入之后使用Plaid：

const Plaid = require('plaid'); //ES5
import Plaid from 'plaid'; //ES2015

（这些都没有经过测试，风险自负）。 如果通过CDN提供NPM包，我更愿意使用它。

Answer 2

我知道这已经很晚了但是我在这里回答这个问题对于那些在做上述事情时遇到麻烦的用户。

除外答案不是集成Plaid（或<script>标记中的任何外部依赖）的最佳方式。 应尽可能避免弹出React应用程序。

更好的解决方案是使用React内置的方式来访问脚本加载的全局变量。 您可以通过访问窗口对象（ window.NameOfYourObject ）来完成此操作。 在这种情况下，它将是window.Plaid 。

在上面的例子中，这看起来像

this.linkHandler = window.Plaid.create({
   clientName: 'plaid walkthrough demo',
   product: ['transactions'],
   key: 'YOUR KEY',
   env: 'sandbox',
   webhook: this.props.webhook,
   token: this.props.token,
   selectAccount: this.props.selectAccount,
   longtail: this.props.longtail,
   onLoad: this.handleLoad,
   onSuccess: this.handleSuccess,
   onExit: this.handleExit,
 });

将脚本放在头部工作，但这也是不好的做法。 最好使用react-load-script之类的东西加载组件的脚本。

在React组件中使用index.html中包含的脚本

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-06-03 03:01:06

解决方案2
2 2017-11-21 02:32:59

在React组件中使用index.html中包含的脚本

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-06-03 03:01:06

解决方案2 2 2017-11-21 02:32:59

解决方案1
2 已采纳 2017-06-03 03:01:06

解决方案2
2 2017-11-21 02:32:59