useEffect 在 DOM 挂载之前触发

Question

我创建了一个钩子，它计算特定页面（您当前所在的那个）上的每个元素与页面顶部之间的距离。 当元素距离页面底部小于 100px 时，它应该淡出元素。 在我放置其他组件（OverviewBox）之前它工作正常。 之后它停止工作。 现在它再次起作用只是因为我用 2 个 setTimeout 函数包装了钩子。 但当然这是一个糟糕的解决方案。 如果没有 setTimeout 函数，我如何使它工作？

useFadeElements 钩子：

import {useEffect, useState} from "react";


//the hook checks every element (unless excluded) which is inside the parentElement. if distance between bottom of viewport
//and top of the element is less than 100px, the element gets "hidden" class.

export const useFadeElements = (parentElementId, excludeTags) => {

const [elementsAndDistances, setElementsAndDistances] = useState(null)

useEffect(()=>{

   setTimeout(()=>{
       setTimeout(()=>{
         
           const targetElement = document.getElementById(parentElementId)
           let elementsInside = targetElement.getElementsByTagName("*")


           elementsInside = [...elementsInside]

           //if user wants to exclude some elements from fading, he passes array of tags he wants to exclude.
           if (excludeTags.length>0){
               elementsInside = elementsInside.filter((el) => {
                   return !excludeTags.includes((el.tagName))
               })
           }

           //create array of objects that contain both reference to element and distance between the element and top of the page
           let elementsAndDistances = []
           elementsInside.forEach((el)=>{
               //add unhidden class in order to show element back/ change opacity to 1
               el.classList.add("unhidden")

               let distance = 0
               //loop up the dom
               let temporaryEl = el;
               do {
                   distance+=temporaryEl.offsetTop
                   temporaryEl = temporaryEl.offsetParent;
               }while (temporaryEl)
               //js may sometimes return distance below 0 due to its problems with precise calculations
               distance = distance < 0 ? 0 : distance;

               elementsAndDistances.push({
                   el,
                   distance
               })
           })

           setElementsAndDistances(elementsAndDistances)
       },0)
   },0)

},[])


useEffect(()=>{
    //check if element distance from its top to the bottom of viewport is smaller that 100px,
    // if so, hide it (change opacity to 0)
    const checkElementDistance = (elementAndDistance) => {
        if ((window.scrollY + window.innerHeight) -100 < elementAndDistance.distance){
            elementAndDistance.el.classList.add("hidden")
        }else elementAndDistance.el.classList.remove("hidden")
    }

    if (elementsAndDistances){
        window.addEventListener("scroll", ()=>{
            elementsAndDistances.forEach((elementAndDistance)=>{
                checkElementDistance(elementAndDistance)
            })
        })
    }
    return ()=>window.removeEventListener("scroll", ()=>{
        elementsAndDistances.forEach((elementAndDistance)=>{
            checkElementDistance(elementAndDistance)
        })
    })
},[elementsAndDistances])

return {elementsAndDistances}
}

我使用钩子的页面：

import "./AboutUs.css"
import Carousel from "../../components/carousel/Carousel";
import {useFadeElements} from "../../hooks/useFadeElements";
import Form from "../../components/form/Form";
import OverviewBox from "../../components/overviewBox/OverviewBox";

const productFeaturesDetails = [
    {
        title: "Wyjazd tylko dla kobiet",
        info: "Daj się zaprosić na wyprawę w gronie inspirujących kobiet! Naładujesz baterie i znajdziesz przestrzeń na zaprzyjaźnienie się z najważniejszą osobą w Twoim życiu – z Tobą samą 🙂 Przygotowaliśmy dla Ciebie zajęcia z medytacji, praktykę jogi, a także warsztaty i kursy biznesowe. I to wszystko pod palmami! No chyba, że od palm wolisz słoneczną Toskanię.",
        imgSrc: "http://wolne.com.pl/wp-content/uploads/2022/03/strona-glowna-5.jpg"
    },
    {
        title: "Wakacje i rozwój osobisty w jednym",
        info: "Obiecujemy, że jadąc z nami znajdziesz przestrzeń i na bycie inspiracją, i na bycie inspirowaną. Naszymi głównymi wartościami są wsparcie i bezpieczeństwo. W grupie wspaniałych, podobnych Tobie kobiet z całej Polski nie tylko fantastycznie wypoczniesz, lecz zyskasz także możliwości na ciekawe znajomości. Kto wie, może zostaną z Tobą do końca życia?",
        imgSrc: "http://wolne.com.pl/wp-content/uploads/2022/03/strona-glowna-4.jpg"
    },
     {
        title: "Dla kogo?",
        info: "Nasze podróże dedykujemy kobietom, które są głodne wyzwań i pięknych momentów, chcą zwiedzać świat, a zarazem lubią mieć towarzystwo i wsparcie w podróży.\n" +
            "\n" +
            "Dzięki WOLNYM możesz podróżować solo, jednocześnie zachowując wsparcie płynące z grupy. My zajmiemy się organizacją. Ty w tym czasie możesz cieszyć się słońcem 🙂",
        imgSrc: "http://wolne.com.pl/wp-content/uploads/2022/03/strona-glowna--scaled.jpg"
    },
     {
        title: "Gdzie możesz pojechać?",
        info: "Sky is the limit! Możliwości jest wiele: możesz dać się oczarować bieli greckich domów, słońcu Toskanii, paryskim nocom lub balijskim rytuałom. A może zainteresuje Cię bogactwo hinduskiej kuchni lub gwar azjatyckich  ulic? Wybór należy do Ciebie: wybierz kierunek, a my zajmiemy się resztą. Daj się zaprosić na przygodę życia!",
        imgSrc: "http://wolne.com.pl/wp-content/uploads/2022/03/strona-glowna-3.jpg"
    }
]

const blogNewPosts = [
    {
        title: "Właściwości aloesu o których nie słyszałaś",
        info: "Często chwalony za swoje kojące właściwości, aloes jest najczęściej używany jako maść do stosowania miejscowego na oparzenia słoneczne i otarcia skóry. czy wiedziałaś, że ta magiczna roślina OFERUJE JESZCZE LEPSZE właściwości lecznicze, gdy jest przyjmowana doustnie?Większość z nas wie, że obecność aloesu w kosmetykach pomaga nawilżyć skórę i spowalnia jej starzenie się. Warto jednak przyjrzeć się temu, jakie właściwości oferuje…",
        imgSrc: "http://wolne.com.pl/wp-content/uploads/2022/08/maria-alvares-de-carvalho-jOzSjzIRrTU-unsplash-scaled.jpg"
    }
]

const AboutUs = ({excursions}) => {
        const {elementsAndDistances} = useFadeElements("about-us__columns", ["DIV"])


    return (
        <div className="about-us">
            <div className="content-container">
                <div id="about-us__columns" className="about-us__columns">
                    <div className="about-us--left-column .about-us--column">
                        {productFeaturesDetails.map((productFeatureDetails)=>{
                            return(
                                <OverviewBox
                                        key={productFeatureDetails.imgSrc}
                                        title={productFeatureDetails.title}
                                        info={productFeatureDetails.info}
                                        titleSize="h2"
                                        imgSrc={productFeatureDetails.imgSrc}
                                />
                            )
                        })}
                    </div>
                    <div className="about-us--right-column .about-us--column">
                        <OverviewBox title="Cześć!" imgSrc="http://wolne.com.pl/wp-content/uploads/2022/02/denys-nevozhai-z0nVqfrOqWA-unsplash.jpg"/>
                        <h2 className="about-us__subtitle">Co nowego na blogu</h2>
                        {blogNewPosts.map((postDetails)=>{
                            return <OverviewBox
                                titleSize="h3"
                                key={postDetails.imgSrc}
                                imgSrc={postDetails.imgSrc}
                                title={postDetails.title}
                                info={postDetails.info}
                            />
                        })}
                    </div>
                </div>
            </div>
            <Carousel data={excursions} title="Wyprawy w naszej ofercie"/>
            <div className="content-container">
                <Form title="Napisz do nas" topTitle="Potrzebujesz więcej informacji?"/>
            </div>
        </div>
    );
};

export default AboutUs;

概览框组件：

    import "./OverviewBox.css"
import {useEffect, useState} from "react";

const OverviewBox = ({title, info, date, imgSrc, titleSize="h2"}) => {

    const [TitleTag, setTitleTag] = useState(null)

    useEffect(()=>{
        setTitleTag(`${titleSize}`)
    },[titleSize])


return (
    <>
        {TitleTag &&   <div className="overview-box">
            <TitleTag className="overview-box__title">{title}</TitleTag>
            <p className="overview-box__info">{info}</p>
            <img className="overview-box__img" src={imgSrc} alt="img"/>
            <span className="overview-box__date">{date}</span>
        </div>}

        </>

    );
};

export default OverviewBox;