如何在 Gatsby React 页面中使用 <script>答案

【问题标题】：How to use <script> inside Gatsby React page如何在 Gatsby React 页面中使用 <script>
【发布时间】：2019-04-03 21:31:50
【问题描述】：

我有一个带有 jQuery 的脚本，我想在我的 gatsby react 页面中使用它。所以首先我在我的项目nestpay.js 中创建了一个文件，然后将脚本内容粘贴到其中：

    function submitformpaiement()
{
// code here
}

其次，我在 render() 中添加了 const payScript = require('../pages/nestpay')

render() {
const payScript = require('../pages/nestpay')
return (
  <Layout>
    <Helmet title="donation" />
    <Nav />
    <div id="main">
    </div>
  </Layout>
)

}

当我运行该项目时，我的 nestpay.js 文件中有大量语法错误。

./src/pages/nestpay.js 模块错误（来自 ./node_modules/eslint-loader/index.js）：

C:\Users\PREDATOR\Desktop\gatsby\ticketsadaka\src\pages\nestpay.js
205:19 警告“>>>”和“|”的意外混合
no-mixed-operators 205:25 警告“>>>”和“|”的意外混合 no-mixed-operators 216:3 错误“strlen”未定义
no-undef 219:7 错误“strlen”未定义
no-undef 219:37 错误“strlen”未定义
no-undef 220:10 错误“strlen”未定义
no-undef 220:45 错误“strlen”未定义
no-undef 222:12 警告“我”已定义
no-redeclare 232:14 警告“j”已定义
no-redeclare 262:12 警告“我”已定义
不重新声明

这是我文件的图片。

我想我错过了该文件中的某些内容，一个标题或一个我不知道的导入。

我在 HTML 页面中测试了该脚本，它工作正常，所以我需要您帮助如何在 gatsby react 页面中使用它。

提前致谢；）

【问题讨论】：

首先，应该添加您的错误，以便人们可以给出更准确的答案。其次，将“require”语句放在文件顶部（在声明之前）并在行中添加分号（只是某种格式），主要是在括号之后和右括号之前的 return 语句。
@JoséCordero 我添加了我的错误
@JoséCordero 你说什么退货声明？？
我所说的'return'是你的'render()'方法中的那个。如果删除导入行（'const payScript = require...'）会发生什么？由于未声明 var 或函数，您的错误似乎来自那里。
@JoséCordero render() 中的返回值是您创建新文件时的 gatsby 格式同样的错误。

标签： javascript jquery reactjs gatsby script-tag

【解决方案1】：

我认为包含标签的最简单方法是将其内联到您的主 index.html 中，例如 or 标签中的<script src="../pages/nestpay.js"</script>。

P.S: 为什么在使用 React GatsbyJS 时要包含一个 jQuery 文件？

【讨论】：

我没有任何文件 .html 我有 index.js 所以我不能做你提供的。
PS：我使用那个脚本 jquery 因为是用于在线支付的模块集成工具包，所以他们只有那个版本。
我认为page 应该可以帮助您。他们有代码示例，说明您可能希望如何包含脚本。我使用了最后一个带有{}.__html 语法的dangerouslySetInnerHTML 道具，它对我有用。您还应该查看可能适合您的用例的 React Helmet。