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

Question

Это мой первый раз, когда я имею дело с Гэтсби и Реактом, поэтому я могу использовать неправильный подход в этом вопросе. В любом случае, это то, что происходит.

Из gatsby-starter-hello-world я создаю этот сайт, который будет состоять из титульной страницы с героем наверху, содержащей вводную информацию , Прямо ниже, я собираюсь вставить некоторый контент (я пока не уверен, о чем), с этим <Header />, появляющимся на свитке. Для этой части я собираюсь использовать Headroom. js, который уже работает на сайте. Дело в том, что он должен быть запущен только после того, как нижняя часть компонента Hero коснется верхней части окна просмотра. И это произойдет только на настольных компьютерах и ноутбуках. На мобильном телефоне я собираюсь сделать его фиксированной навигационной панелью.

В любом случае, прямо сейчас, это то, что у меня есть для макета. 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. Пока не знаю, как сделать этот макет. 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>
  )
}