Куда поместить компонент, монтированный в моем следующем. js файле - PullRequest
Новая
       19

Куда поместить компонент, монтированный в моем следующем. js файле

0 голосов
/ 19 февраля 2020

Halo, ребята, извините за этот глупый вопрос, но где я могу добавить componentDidMount () в моем реагирующем js документе?

Я пытаюсь вставить скрипт Google Analytics, и я нашел на нем видео, но я не знаю, где поставить этот элемент. Я дам вам скриншот моего файла.

Спасибо (я знаю, что мой редактор странный, но код Visual Studio продолжает падать)

следующий. js файл

Папка screemshot

1 Ответ

0 голосов
/ 19 февраля 2020

Возможно, вы захотите создать Компонент макета

Пример: 

// components/layout.js
import React from 'react'
import { initGA, logPageView } from '../utils/analytics'

export default class Layout extends React.Component {
  componentDidMount () {
    if (!window.GA_INITIALIZED) {
      initGA()
      window.GA_INITIALIZED = true
    }
    logPageView()
  }
  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

Затем вы можете использовать компоновку для упаковки других компонентов

Пример: 

// pages/about.js
import Layout from '../components/layout'

export default () => (
  <Layout>
    <div>About us</div>
  </Layout>
)

Пример: 

// utils/analytics.js
import ReactGA from 'react-ga'

export const initGA = () => {
  console.log('GA init')
  ReactGA.initialize('UA-xxxxxxxxx-1')
}
export const logPageView = () => {
  console.log(`Logging pageview for ${window.location.pathname}`)
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}
export const logEvent = (category = '', action = '') => {
  if (category && action) {
    ReactGA.event({ category, action })
  }
}
export const logException = (description = '', fatal = false) => {
  if (description) {
    ReactGA.exception({ description, fatal })
  }
}

Надеюсь, это поможет.

...