Как включить местный javascript на страницу Гэтсби? - PullRequest
Новая
       7

Как включить местный javascript на страницу Гэтсби?

0 голосов
/ 22 февраля 2019

Я новичок в React, и я полагаю, что здесь есть кое-что фундаментальное, чего я не совсем понимаю.Страница Гэтсби по умолчанию выглядит следующим образом.Есть ли способ использовать локальный файл .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>
)

Ответы [ 3 ]

0 голосов
/ 23 февраля 2019

Гэтсби использует html.js в папке src.Не 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,
}

Для добавления пользовательского Javascript, используя dangerouslySetInnerHTML внутри src/html.js: 

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

Вы можете попробовать добавить свои js туда, но учтите, что ваши js могут работать не так, как ожидалось.Вы всегда можете посмотреть в реагирующий шлем для более динамичных приложений и добавления сценариев в <head>.

Документация Гэтсби: https://www.gatsbyjs.org/docs/custom-html/

0 голосов
/ 23 февраля 2019

После нескольких часов разочарования я наконец наткнулся на обсуждение на GitHub, которое решило это для меня.В Гэтсби есть вещь, называемая статическая папка , для которой один вариант использования включает в себя небольшой скрипт за пределами связанного кода.

Кто-нибудь еще в той же ситуации, попробуйте выполнить следующие действия:

  1. Создайте папку static в корне вашего проекта.

  2. Поместите свой скрипт script.js в папку static.

  3. Включите сценарий в свой реактивный дом с реактивным шлемом .

Так же и в случае с кодомЯ отправил в своем исходном вопросе, например: 

import React from "react"
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

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

const IndexPage = () => (
  <Layout>
    <Helmet>
        <script src={withPrefix('script.js')} type="text/javascript" />
    </Helmet>
    <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>
)

Обратите внимание на импорт 

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

и элемент скрипта. 

<Helmet>
    <script src={withPrefix('script.js')} type="text/javascript" />
</Helmet>

Это сэкономило бы часымоего времени, надеюсь, это делает это для кого-то еще.

0 голосов
/ 22 февраля 2019

React работает с динамическим DOM.Но для рендеринга через браузер ваш веб-сервер должен отправить страницу статического индекса, где React будет включен в качестве еще одного тега script.

Итак, взгляните на страницу index.html, которую вы можетенайти в папке public.Там вы можете вставить свой тег script в заголовочный раздел, например.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...