1

这是我第一次处理 Gatsby 和 React，所以我可能在这个问题上使用了错误的方法。无论如何，这就是正在发生的事情。

从 gatsby-starter-hello-world 开始，我正在构建这个网站，该网站将由一个首页组成，顶部有一个英雄，包含介绍信息。就在下面，我打算插入一些内容（我还不确定是什么），这会<Header />出现在滚动条上。对于这部分，我打算使用 Headroom.js，它已经在该站点中运行。问题是我只需要在 Hero 组件的底部接触到视口的顶部后触发它。这只会发生在台式机和笔记本电脑上。在移动设备上，我打算将其设为固定导航栏。

无论如何，现在，这就是我所拥有的 Layout.js

import React from "react"

import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Hero from "./index/hero"
import Header from "./header"
import Headroom from "react-headroom"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  function() getHeroSize {
    var heroHeight = Hero.clientHeight;
  }


  return (
    <>
      <Hero siteTitle={data.site.siteMetadata.title} ref="inner" />
      <div className={"container mx-auto"}>

      <Headroom pinStart={heroHeight}>
      <Header siteTitle={data.site.siteMetadata.title} />
      </Headroom>


        <div
          //style={{
          //  margin: `0 auto`,
          //  maxWidth: 960,
          //  padding: `0px 1.0875rem 1.45rem`,
          //  paddingTop: 0,
          //}}

        >
          <main>{children}</main>
          <footer>
            © {new Date().getFullYear()}, Construído com
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>
        </div>
      </div>

    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

上面的getHeroSize函数更像是我在想什么的意图展示。它真的不起作用。

我正在使用 Tailwind CSS 并使用 gatsby-source-trello 从 Trello 采购一些内容。还不知道如何制作这个 Layout.js，但这是我从一些测试中得到的，到目前为止效果很好。我知道在 gatsby-node.js 中会有一些工作要做，但我相信这个标题会出现在我创建的任何其他页面中，所以。

任何想法、建议或文档链接都会非常感激。提前致谢！

4

1 回答 1

0

你的Hero组件需要用来forwardRef传递ref到最近的 React 元素：

const Hero = React.forwardRef((props, ref) => 
  <div ref={ref}>
    {props.title}
  </div>

然后你需要创建一个 refLayout并将其传递给Hero：

import React, { useRef } from "react"

const Layout = ({ children }) => {
  const heroRef = useRef()
  // ...
  return (
    <>
      <Hero title={data.site.siteMetadata.title} ref={heroRef} />
      {/* ... */}
    </>
  )
}

最后，您需要使用挂钩来测量heroRef.current元素的实际高度。这是我使用的一个：

import { useEffect, useState } from "react"
import debounce from "lodash/debounce"

export default (ref, ttl = 100) => {
  const [dimensions, setDimensions] = useState()

  useEffect(() => {
    if (!ref.current) return

    const measure = debounce(() => {
      if (ref.current) {
        setDimensions(ref.current.getBoundingClientRect())
      }
    }, ttl)

    measure()
    window.addEventListener("resize", measure)

    return () => {
      window.removeEventListener("resize", measure)
    }
  }, [ref, ttl])

  return dimensions
}

以下是您可以如何将其添加到Layout：

import useElementDimensions from "hooks/useElementDimensions"

const Layout = ({ children }) => {
  const heroRef = useRef()
  const heroDims = useElementDimensions(heroRef) || { top: 0, height: 0 }
  const heroBottom = heroDims.top + heroDims.height

  return (
    <Headroom pinStart={heroBottom}>
      <Header siteTitle={data.site.siteMetadata.title} />
    </Headroom>
  )
}
于 2020-01-13T21:12:50.383 回答