web-dev-qa-db-ja.com

Gatsby.jsプロジェクトにjQueryを含める方法は？

私はしばらくgatsby.jsを試してみましたが、この問題を除いてすべてが順調に進んでおり、アプリにjQueryスクリプトを含めることができないため、gatsbyアプリがレンダリングされた後に読み込まれ、スクリプトタグが含まれています_html.js_ファイルを読み込んで読み込みましたが、_simple-load-script_を使用してcomponentDidMountメソッドに含めようとしたコンテンツを画面にレンダリングする前にコードが実行されているようです_html.js_アプリで。しかし、運が悪いので、これが私の_html.js_ファイルのソースコードです。

_html.js_

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

export default class HTML extends React.Component {
  componentDidMount() {
    console.log('hello world');
  }
  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}
        </head>
        <body>
          {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,
}
_

ご覧のように、コンソールに書き出すためにcomponentDidMount()メソッドを置き換えましたが、このメソッドの実行を妨げるものはありませんでした。

誰かがこれについての経験を持っているなら、共有してください、ありがとう。

jqueryreactjsgatsbyjamstack
7
Jonathan Kumar

GatsbyプロジェクトにjQueryを追加する別の方法-gatsby-ssr.jsとgatsby-browser.jsを使用する：

JQueryをgatsby-ssr.jsに追加する

Rootにgatsby-ssr.jsがまだない場合は、作成する必要があります。

const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossOrigin="anonymous">
    </script>,
  ])
}

スクリプトタグがメモの上部に配置されます。開発環境を実行している場合は、gatsby-ssr.jsを機能させるために再度実行する必要があります。

コードをgatsby-browser.jsに追加します

Rootにgatsby-browser.jsがない場合は、作成する必要があります。これはあなたのコードの場所です：

const $ = require("jquery")

export const onInitialClientRender = () => {
  $(document).ready(function () {
    console.log("The answer is don't think about it!")
  });
}

このメソッドは、コードをcommon.jsに配置します。他のAPIを使用してコードを実行することもできます。 Gatsby Browser API doc

免責事項

これは少しハックであり、一般に、GatsbyでjQueryを使用することは実際にお勧めしませんが、迅速な修正のために、それはうまく機能します。

さらに、html.jsはGatsbyガイドでは推奨されていません。

Html.jsのカスタマイズは、gatsby-ssr.jsで適切なAPIを使用できない場合の回避策です。上記のメソッドの代わりにonRenderBodyまたはonPreRenderHTMLの使用を検討してください。さらなる検討事項として、html.jsのカスタマイズは、Gatsbyテーマ内ではサポートされていません。代わりに、前述のAPIメソッドを使用してください。

2
rosszember