如何在 Gatsby 中将 js 添加到 React 组件中？答案

【问题标题】：How to add js to React components in Gatsby?如何在 Gatsby 中将 js 添加到 React 组件中？
【发布时间】：2018-11-11 07:30:26
【问题描述】：

我正在尝试将脚本标签中的滚动功能添加到 Gatsby 中的此标头组件中。我知道它可以在 html 中工作而不是在反应中，但是正确的方法是什么？谢谢！

import React from 'react'
import Link from 'gatsby-link'
import './header.css'

const Header = () => (
  <div className='Header'>

    <div className='HeaderGroup'>
      <Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
      <Link to='/index'>Selected Works</Link>
      <Link to='/uber'>Uber Thoughts</Link>
      <Link to='/awards'>Awards</Link>
      <Link to='/about'>About</Link>
    </div>
  </div>
)

export default Header

<script>
  $(window).scroll(function () {
    if ($(window).scrollTop() > 10) {
      $('.Header').addClass('floatingHeader');
    } else {
      $('.Header').removeClass('floatingHeader');
    }
  }
</script>

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

如果您希望在 DOM 准备好之前加载脚本，您可以将脚本添加到 html.js 文件中。

来自 Gatsby 文档：

Gatsby 使用 React 组件来服务器渲染和其他核心 Gatsby 应用程序之外的部分 HTML。

阅读更多相关信息here。

在您的情况下，您可以做的是在 componentDidMount react 生命周期方法中编写脚本，因为您需要访问 DOM（因为您在那里使用 jQuery）您需要在正文之后运行脚本已加载，因此将脚本放在 <head> 中不起作用，您需要将其添加到 componentDidMount 方法中，首先将您的组件设为类组件以访问反应生命周期方法。

import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'

import './header.css'

class Header extends React.Component {
  componentDidMount () {
    $(window).scroll(function () {
      if ($(window).scrollTop() > 10) {
        $('.Header').addClass('floatingHeader');
      } else {
        $('.Header').removeClass('floatingHeader');
      }
    })
  }
  render () {
    return (
      <div className='Header'>
        <div className='HeaderGroup'>
          <Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
          <Link to='/index'>Selected Works</Link>
          <Link to='/uber'>Uber Thoughts</Link>
          <Link to='/awards'>Awards</Link>
         <Link to='/about'>About</Link>
        </div>
      </div>
    )
  }
}

export default Header

您还可以使用像 gatsby-starter-blog 项目这样的 Gatsby 布局模板，并将您的脚本作为 <script>Your script</script> 放在 {children} 调用的底部，它将在您的所有页面中可用，与使用 html 相同.js 文件，但由于您需要访问 DOM，因此您需要将其放在正文中以使脚本正常工作（有关 Gatsby 布局的更多信息 here）。

【讨论】：

谢谢！但它表明 componentDidMount 方法的最后一个 } 是一个意外的标记
我更新了答案，你的脚本函数有错字:)