gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 08:14:47 25 4
gpt4 key购买 nike

我正在尝试为我的 React 组件使用我在 index.html 的脚本标签中加载的库中的变量。我已正常加载它:

<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 会抛出错误,即使我可以通过调试器访问它?

最佳答案

我知道这已经晚了,但我在这里为那些在执行上述操作时遇到问题的 future 用户回答这个问题。

异常(exception)的答案是不是集成 Plaid(或 <script> 标签中的任何外部依赖项)的最佳方式。弹出 React 应用程序应该是 avoided可能的话。

更好的解决方案是使用 React built in访问脚本加载的全局变量的方式。您可以通过访问窗口对象 (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 的组件加载脚本.

关于javascript - 在 React 组件中使用 index.html 中包含的脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44339627/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com