reactjs - 在我的 next.js 文件中安装组件的位置

Question

Halo 伙计们，抱歉问这个愚蠢的问题，但是我应该将 componentDidMount() 放在我的 react js 文档中的什么位置？
我正在尝试插入 google 分析脚本，我在上面找到了一个视频，但我不知道将该元素放在哪里。我会给你我的文件截图。
谢谢
(我知道我的编辑器很奇怪，但 Visual Studio 代码总是崩溃)

Answer 1

您可能想要创建一个布局组件

例子:

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

然后就可以使用 Layout 来包裹其他组件

例子:

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

我希望这有帮助。