Fatal编程技术网
  • reactjs/
  • Reactjs 给盖茨比加上斯尼普卡特

Reactjs 给盖茨比加上斯尼普卡特

reactjs gatsby

Reactjs 给盖茨比加上斯尼普卡特,reactjs,gatsby,snipcart,Reactjs,Gatsby,Snipcart,我正试图将斯尼普卡特融入盖茨比（v2） 我像这样编辑html.js文件： import React from "react" import PropTypes from "prop-types" export default class HTML extends React.Component { render() { return ( <html {...this.props.htmlAttributes}> <head>

我正试图将斯尼普卡特融入盖茨比（v2）

我像这样编辑
html.js
文件：

import React from "react"
import PropTypes from "prop-types"

export default class HTML extends React.Component {
  render() {
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}

          {/* Snipcart */}
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
          <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="UF45pIjZjAtZWJkYS00MGEwLWIxZWEtNjljZThjNTRiNjA4NjM2NDg1MzAzMzQyNfDrr48"></script>
          <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />

        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}

        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

从“React”导入React
从“道具类型”导入道具类型
导出默认类HTML扩展React.Component{
render（）{
返回(
{this.props.headComponents}
{/*Snipcart*/}
{this.props.preBodyComponents}
{this.props.postBodyComponents}
)
}
}
HTML.propTypes={
HtmlatAttributes:PropTypes.object，
headComponents:PropTypes.array，
bodyAttributes:PropTypes.object，
preBodyComponents:PropTypes.array，
正文：PropTypes.string，
postBodyComponents:PropTypes.array，
}
什么有效：

如果我创建一个div：

<a href="#" class="snipcart-edit-profile">
   Edit profile
</a>
Snipcart工作并在单击时打开用户配置文件

什么不起作用：

当我想使用公共API时，例如，如果我调用：

函数中的Snipcart.api.user.logout（）

=>未定义错误“Snipcart”无未定义


如何在我的所有应用程序中使用全局Snipcart对象？
无未定义
是一个linter错误，而不是运行时错误。因此，它并不表示在代码运行时Snipcart不可用

如果不可用，您将在浏览器控制台中收到此错误，
引用错误：未定义Snipcart

如果您使用的是
eslint
，您可以在eslint配置中这样做：


{
    "globals": {
        "Snipcart": false
    }
}


或者，您可以在使用Snipcart API的文件中添加注释：
/*全局Snipcart:false*/




Snipcart
对象仅在浏览器中可用，因此您应确保在盖茨比预渲染您的网站时不要调用这些函数。这意味着您应该只调用
Snipcart.api.*
函数，而不是SSR或节点api

另外，为了确保仅在脚本完全加载后才调用Snipcart的API，请执行以下操作：


非常感谢，我现在更了解它的工作原理。对于linter错误来说是可以的，但是它会杀死构建，这就是问题所在。如果我想使用
Snipcart.api.user.logout（）
，例如，在一个带有盖茨比浏览器api的深度
组件中使用
，您能给我一个如何执行此操作的示例吗？在继续之前，您必须先修复linting错误。我链接到的eslint文档应该会有所帮助。您应该更新您的问题，以显示您在组件中如何/在何处调用Snipcart的API，我们将有更好的上下文来帮助您：）谢谢。我使用Standardjs作为linter，并添加了Snipcart作为全局变量，但我认为我不需要配置eslint。我添加了这个包，它工作得非常好。这么简单，我有点惭愧！你是最好的，斯尼普卡特·洛克的！使用
window.Snipcart
而不仅仅是
Snipcart
还可以修复过梁警告，而无需对盖茨比的过梁配置进行任何更改。：）

document.addEventListener('snipcart.ready', function() {
    // any Snipcart.api.* call
});



import { window, document } from ‘browser-monads’;

// Your code will build now!
console.log(`Location: ${window.location.href}`);