个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 Google Place API 中的自动完成地址服务。
找到这个库: https://github.com/kenny-hibino/react-places-autocomplete#load-google-library
它要求在我的项目中加载库: https://github.com/kenny-hibino/react-places-autocomplete#getting-started
如果它是纯 Reactjs 项目，我会在 public/index.html 中执行此操作。但是Gatsbyjs项目中的public/index.html每次运行都会被删除并重新生成:
Gatsby develop
命令行。
如何在我的 Gatsbyjs 项目中使用 Google Place API？
我尝试了两种方法来实现这一目标。
在/layouts/index.js 中使用 React-Helmet，如下所示:
<Helmet>
<script src="https://maps.googleapis.com/maps/api/js?key={API}&libraries=places&callback=initAutocomplete" async defer></script>
</Helmet>
将脚本引用放在/public/index.html 中，如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title data-react-helmet="true"></title>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=places" async defer ></script>
</head>
<body>
<div id="___gatsby"></div>
<script src="/commons.js"></script>
</body>
</html>
对于第一个解决方案，每次刷新页面后，项目都会抛出一个错误，要求加载 Google JavaScript Map API。
对于第二种解决方案，每次我通过命令行重新启动Gatsby后:gatsbydevelop
它会重新生成index.html，从而清除其中的 JavaScript 引用。
最佳答案
您不应修改 public 中的任何文件使用 GatsbyJS 进行 forlder。
相反，我建议您customize your html.js file .
为此，请首先运行:
cp .cache/default-html.js src/html.js
您应该拥有 html.js文件位于 /src/html.js 中。
现在您可以输入 <script> <head> 内的标签.
关于reactjs - 在 Gatsbyjs (Reactjs) 项目中加载 Google Place API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50274502/
26
4
0
注意:感谢@Ferran Buireu 的建议。由于对 docker 非常陌生，并且将网络世界更改为系统和编程，我很肯定会得到负票。 部署gatsbyjs后，发现socketio错误“net::ERR
我是 gatsbyjs 的新手。遵循所有教程并开始使用 Saasland 模板使用 gatsbyjs 创建网站。我已经用 npm 安装了 bootstrap。该模板具有以下 vendor 特定的依赖项
我正在尝试在 Visual Studio 代码中调试我的 gatsbyjs 代码。我按照文档并尝试了稍微不同的方法，例如 https://github.com/Microsoft/vscode-rec
有人可以谈谈或将我链接到包发布策略背后的理由吗？我想知道为什么有这么多“仅版本提升”的版本，它使变更日志过于冗长并且 => 难以及时升级软件包。它还使版本差异变得更加困难。 例如https://git
我正在用 gatsbyjs 构建一个站点。就seo而言，我认为“onClick”是不可抓取的。所以也许有人可以帮助我。 我有这个: render={data => (
我的问题:我试图将 Gatsby 与 headless WordPress 集成并成功地做到了。我从 WordPress 动态制作了多个菜单，并通过 GraphQL 调用这些菜单。每件事似乎都运行良好
我如何为 Gatsby 创建一个将在客户端加载而不是在构建时加载的组件？ 我创建了这个，它使用 gatsby develop 呈现，但不使用呈现的服务器端呈现 import React from 'r
我想要这样的路线:/blog/:blogId/:slug 我在我的 gatsby-node.js 中试过了 - exports.onCreatePage = async ({ page, action
我无法理解如何在 GatsbyJS 中为 GraphQL 查询编写过滤器。 这有效: filter: { contentType: { in: ["post", "page"] } 我基本上需要相反的
我正在尝试使用 Gatsby JS 和 Material UI 创建一个网站。存储网站内容的首选方式是什么。该网站将只是一个小型企业的宣传网站。 我是否只保留组件中的文本。或者我需要将它保存在单独的文
我在 GatsbyJS 中使用单页模板，菜单滚动到同一页面的不同部分(#home、#about、#portfolio 等)。有没有办法在链接上设置事件类名，突出显示用户所在的链接？ 最佳答案 Link
因此，我在 Netlify 上托管了一个网站。我遵循了他们网站上的文档(关于表单)，部署后表单的名称显示在我的 Netlify dash 上，但没有任何提交通过。 我可以帮忙吗？ 这是我的 Conta
我希望托管一个 gatsbyjs 博客，该博客从 Contentful 中获取数据，类似于以下示例。 https://github.com/gatsbyjs/gatsby/tree/master/ex
我的目标是从本地插件创建页面。我写了一个名为 my-custom-plugin 的自定义插件。我还安装了 gatsby-plugin-page-creator 插件，以在默认 pages 目录之外自动
我正在使用 GatsbyJS，并且我正在尝试根据 URL 的路由呈现不同的 header。 示例: mydomain.com/ => 应呈现 HeaderLanding mydomain.com/bl
我正在使用 gatsby-plugin-styled-components 来设置下面元素的样式。 import React from 'react'; import styled from 'sty
我是 GatsbyJS 和 ReactJS 的新手，在构建项目时遇到问题。问题是每当我在其中构建带有 AOS 的项目时，它都会显示错误窗口未定义。当我在开发模式下运行时完全没问题。 这是我的代码: 我
我想在我的 gatsby 生成的网站中创建一个使用 slug 作为参数的路由。 我有一个位于路线 /projects/ 上的项目列表. 通常使用 react router 我会创建一个这样的路由:
我将 Strapi 用作 Headless CMS，并使用 Gatsby + Graphql 构建我的前端。我有一个“ block 渲染器”组件，用于渲染 strapi 中的任何动态区域。 impor
我处于一个有点不幸的位置，几年前某人的设计选择现在正在影响我重建网站。基本上，早在网站最初创建时，设计者就插入所有 URL 完全显式地使用 .html 扩展名(例如 website.com/index
我是一名优秀的程序员,十分优秀！