在React组件中使用index.html中包含的脚本
[英]Using included script in index.html in React components
问题描述
I am trying to use a variable from a library I have loaded in a script tag in my index.html for my React components. 
我正在尝试使用我在index.html中的脚本标记中加载的库中的变量来获取我的React组件。 I've loaded it as normal: 我正常加载它：
<head>
...
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<!-- gives me the 'Plaid' library -->
...
<title>React App</title>
</head>
However, when I try accessing Plaid in my React components, it's undefined. 但是，当我尝试在我的React组件中访问Plaid时，它是未定义的。 I am confused because if I put in a debugger right before it, I can still access it. 我很困惑，因为如果我在它之前放入一个调试器，我仍然可以访问它。 For instance, in my App.js component, I have: 例如，在我的App.js组件中，我有：
componentDidMount() {
debugger // can access 'Plaid' here
Plaid // throws error, 'Plaid' is undefined
}
Why is it that Plaid throws an error, even though I can access it through the debugger? 为什么Plaid会抛出错误，即使我可以通过调试器访问它？
2 个解决方案
解决方案1
2 已采纳 2017-06-03 03:01:06
The problem is that Webpack files are bundled separately, separate from the required script. 问题是Webpack文件是单独捆绑的，与所需的脚本分开。 Thus, when you try to access the global variable, it doesn't exist. 因此，当您尝试访问全局变量时，它不存在。
You're going to have to customize your Webpack configuration yourself if you want to use <script> s. 如果要使用<script>则必须自己自定义Webpack配置。 This involves ejecting create-react-app and managing everything yourself. 这涉及弹出create-react-app并自行管理所有内容。 Backup your project before you do this, because after ejecting there's no going back! 在你这样做之前备份你的项目，因为在弹出之后就没有回头了！ First run: 第一次运行：
npm run eject
After ejecting finishes, navigate to the webpack.config.js and add a new key to the configuration object: 弹出完成后，导航到webpack.config.js并向配置对象添加新密钥：
externals: {
}
What externals does is take a global variable declared by a script from a CDN such as Plaid, and allows it to be used as a module in the project. externals作用是从CDN（例如Plaid）获取脚本声明的全局变量，并允许它用作项目中的模块。 Thus, configure it like this: 因此，配置如下：
externals: {
plaid: 'Plaid'
}
This takes the global variable Plaid from the CDN and serves it as a module named plaid . 这将从CDN获取全局变量Plaid并将其作为名为plaid的模块提供。 Then you'll be able to use Plaid after importing it: 然后你可以在导入之后使用Plaid：
const Plaid = require('plaid'); //ES5
import Plaid from 'plaid'; //ES2015
(None of this is tested, proceed at your own risk). （这些都没有经过测试，风险自负）。 I would much prefer to use an NPM package if it is provided, over a CDN. 如果通过CDN提供NPM包，我更愿意使用它。
解决方案2
2 2017-11-21 02:32:59
I know this is late but I am answering this here for future users who had trouble doing what was described above. 我知道这已经很晚了但是我在这里回答这个问题对于那些在做上述事情时遇到麻烦的用户。
The excepted answer is not the best way of going about integrating Plaid (or any external dependency in a <script> tag). 除外答案不是集成Plaid（或<script>标记中的任何外部依赖）的最佳方式。 Ejecting a React app should be avoided when possible. 应尽可能避免弹出React应用程序。
A better solution is to use the React built in way of accessing the global variable the script loads. 更好的解决方案是使用React内置的方式来访问脚本加载的全局变量。 You do this by accessing the window object ( window.NameOfYourObject ). 您可以通过访问窗口对象（ window.NameOfYourObject ）来完成此操作。 In this case it would be window.Plaid . 在这种情况下，它将是window.Plaid 。
In the context of the above example this would look like 在上面的例子中，这看起来像
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,
});
Having the script in the head works but it is also poor practice. 将脚本放在头部工作，但这也是不好的做法。 It would be better to load the script with the component using something like react-load-script . 最好使用react-load-script之类的东西加载组件的脚本 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.