Как получить высоту компонента для запуска Headroom в React?

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 и получаю некоторый контент из Trello с помощью gatsby-source-trello. Пока не знаю, как создать Layout.js, но это то, что я получил в результате тестирования, которое пока работало довольно хорошо. Я понимаю, что в gatsby-node.js нужно будет поработать, но я считаю, что этот заголовок будет на любой другой странице, которую я создаю, так что.

Любые мысли, предложения или ссылки на документацию будут приняты с благодарностью. Заранее спасибо!

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} />
      {/* ... */}
    </>
  )
}

Наконец, вы захотите использовать крючок, чтобы измерить фактическую высоту 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>
  )
}