javascript - 如何获取组件高度来触发 React 中的 Headroom？

Question

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

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

无论如何，现在，这就是我的 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 中创建一个引用并将其传递给 Hero:

import React, { useRef } from "react"

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

最后，您需要使用钩子(Hook)来测量 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
}

以下是将其添加到布局中的方法:

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