web-dev-qa-db-ja.com

GatsbyページにローカルJavaScriptを含める方法は？

私は合計ですReact初心者で、ここではよく理解していない基本的なものがあると思います。デフォルトのGatsbyページは次のようになります。ローカルの.jsファイルを使用する方法はありますかなんかこんな感じ？

<script src="../script/script.js"></script>

私が達成したいのは、無視して反応させることですscript.jsでも、クライアント側で使用してもらいます。デフォルトのギャツビーのページはこのように見えますが、そこで何かをすることは可能ですか？

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)
javascriptreactjsgatsby
6
Matias Heikkilä

Gatsbyはsrcフォルダー内のhtml.jsを使用します。ほとんどの反応プロジェクトのようにindex.htmlではありません。

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}
        </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,
}

src/html.js内でdangerouslySetInnerHTMLを使用してカスタムJavascriptを追加する場合：

<script
  dangerouslySetInnerHTML={{
    __html: `
            var name = 'world';
            console.log('Hello ' + name);
        `,
  }}
/>

そこでjsを追加してみることができますが、jsが期待どおりに動作しない可能性があることに注意してください。あなたはいつでも、よりダイナミックなアプリの反応ヘルメットを調べたり、<head>にスクリプトを追加したりできます。

ギャツビーのドキュメント： https://www.gatsbyjs.org/docs/custom-html/

1
brooksrelyt

Reactは動的DOMで動作します。ただし、ブラウザでレンダリングするには、Webサーバーが静的インデックスページを送信する必要があります。ここで、Reactは別のscriptタグとして含まれます。

だから、あなたのindex.htmlページ。これはpublicフォルダにあります。たとえば、ヘッダーセクションにscriptタグを挿入できます。

0
Victor Perov