如何获取组件高度以触发 React 中的 Headroom？

Question

这是我第一次接触 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 中会有一些工作要做，但我相信这个 header 会出现在我创建的任何其他页面中，所以。

任何想法、建议或文档链接都将不胜感激。提前致谢！

Answer 1

您的 Hero 组件需要使用 forwardRef 将 ref 传递给最近的 React 元素：

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

然后您需要在 Layout 中创建一个 ref 并将其传递给 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>
  )
}

如何获取组件高度以触发 React 中的 Headroom？

How to get an component height to trigger Headroom in React?

javascript

reactjs

headroom.js

gatsby