Question

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

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>

Answer 1

如果要在DOM准备就绪之前加载脚本，可以将脚本添加到html.js文件中。

从盖茨比文档：

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

详细了解here。

在您的情况下，您可以做的是在componentDidMount react生命周期方法中编写脚本，因为您需要访问DOM（因为在那里使用jQuery），因此需要在主体已加载，因此将您的脚本放置在<head>中将无法正常工作，您需要通过首先将您的组件设为类组件来访问react生命周期，将其添加到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布局模板，并将脚本作为{children}放在<script>Your script</script>调用的底部，它将在您的所有页面中使用，与使用html.js文件相同，但是由于您需要访问DOM，因此需要将其放在正文中以使脚本起作用（有关Gatsby布局here的更多信息）。

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

1 个答案: