web-dev-qa-db-fra.com

Comment inclure le javascript local sur une page Gatsby?

Je suis un total React newbie et je suppose qu'il y a quelque chose de fondamental que je ne comprends pas très bien ici. Une page Gatsby par défaut ressemble à ceci. Existe-t-il un moyen d'utiliser un fichier .js local un peu comme ça?

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

Ce que je voudrais réaliser, c'est de réagir ignorer script.js mais toujours utiliser le côté client. Une page Gatsby par défaut ressemble à ceci, est-il possible de faire quelque chose comme ça là-bas?

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 utilise html.js dans le dossier src. Pas index.html comme la plupart des projets React.

Exemple de fichier 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,
}

Pour ajouter du Javascript personnalisé en utilisant dangerouslySetInnerHTML dans src/html.js:

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

Vous pouvez essayer d'y ajouter vos js, mais notez que vos js peuvent ne pas fonctionner comme prévu. Vous pouvez toujours regarder dans react-casque pour des applications plus dynamiques et ajouter des scripts à <head>.

Documentation Gatsby: https://www.gatsbyjs.org/docs/custom-html/

1
brooksrelyt

React fonctionne avec DOM dynamique. Mais pour le rendre par navigateur, votre serveur Web doit envoyer une page d'index statique, où React sera inclus comme une autre balise script.

Alors jetez un œil à votre index.html page, que vous pouvez trouver dans le dossier public. Vous pouvez y insérer votre balise script dans la section d'en-tête, par exemple.

0
Victor Perov