SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 12:41pm
1
Salut. Am o problema careia nu reusesc sa-i dau de cap.
Vreau sa calculez height-ul headerului, doar ca in momentul in care intru pe incognito, la primul load primesc valori haotice.
Am incercat asa:
Am incercat si cu document.querySelector('.header').offsetHeight
Am cautat si pe google, dar nu ma ajuta ce am gasit (adica varianta cu useRef).
Merci
claudiucjc
(Claudiu Cojocaru)
aprilie 11, 2022, 12:46pm
2
ai incercat useLayoutEffect?
de ce folosesti jQuery?
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 12:51pm
3
Am incercat acum, dar nu functioneaza
claudiucjc:
de ce folosesti jQuery?
jQuery? Nu folosesc jQuery.
iamntz
(Ionuț Staicu)
aprilie 11, 2022, 1:05pm
4
Cel mai probabil ai imagini în header care se încarcă după inițializarea JS-ului.
isti37
(István F.)
aprilie 11, 2022, 1:06pm
5
Don’t do this, ma dor ochii.
Foloseste un resize observer si un useState.
react-hook/packages/resize-observer at master · jaredLunde/react-hook (github.com)
React.useLayoutEffect(() => {
setSize(target.current.getBoundingClientRect())
}, [target])
Pune ref in dependinte la useEffect, la prima incarcare probabil nu ai height.
2 Likes
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 1:06pm
6
Nu am imagini in header.
Ciudat este ca primesc acele valori DOAR in momentul in care fac primu load pe incognito, dupa refresh ia valorile ok.
stefanz
(Stefan)
aprilie 11, 2022, 1:21pm
7
Iti lipseste headerRef
din dependecy array ul useEffect
. Cel mai probabil dupa ce faci refresh iti trage informatiile din cache si are din prima access la DOM.
Recomand sa adaugi un linters si sa te asiguri ca ai react-hooks/exhaustive-deps
enabled pentru a evita chestii de genul pe viitor.
Pentru resize event recomand addEventListener
. Nu uita sa distrugi listenerul in functia de return a lui useEffect
1 Like
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 1:42pm
8
Salut!
Am facut cum ai spus, dar nu functioneaza nici asa.
Am activat linterul, dar nu imi afiseaza erori daca las gol array-ul de la useEffect.
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 2:01pm
9
Salut.
Am incercat, dar nu pricep de ce nu functioneaza. Am copiat codul din documentatie si primesc undefined la refresh
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
Merci
1 Like
isti37
(István F.)
aprilie 11, 2022, 2:03pm
10
Hooks FAQ – React (reactjs.org) - Raspunsul tau e aici
Loading… - CodeSandbox - Exemplu
Am uitat ca ref nu merge in useEffect, trebuie folosit useCallback. Totusi eu n-am folosit niciodata varianta asta, recomand resize observer-ul.
Ai adaugat react-hook/resize-observer in package.json ? (adica npm i @react-hook /resize-observer )
1 Like
claudiucjc
(Claudiu Cojocaru)
aprilie 11, 2022, 2:03pm
11
Incearca sa faci
if(!headerRef && !headerRef.current) return;
si dupa aduga function headerHeight()
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 2:10pm
12
Imi face return direct, pentru ca headerRef.current este undefined la primul load.
isti37
(István F.)
aprilie 11, 2022, 2:16pm
14
Acum am vazut video-ul.
Deci de la useState iei size-ul si il pui intr-un useLayoutEffect la dependinte, in useLayoutEffect pui un if(size) { …} daca vrei sa il integrezi in codul vechi. Daca n-ai width/height setat s-ar putea sa fie undefined, se rezolva cu if.
claudiucjc
(Claudiu Cojocaru)
aprilie 11, 2022, 2:22pm
15
Folosesti Next.js? pentru ca atunci se schimba problema. nu ai window
Da, acum vad. Asta e problema, nu ai window.
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 2:22pm
16
Da, Next.js folosesc. Teoretic Window ar trebui sa existe in useEffect
, corect? Ca d-aia incercam in useEffect
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 2:33pm
18
Am adaptat functia sa imi ia height-ul headerului
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
Dar la fel… nu inteleg din ce cauza are alt height la primul load
Mentionez ca asta se intampla doar cand rulez build & start. Cand sunt pe dev este totul ok :-?
isti37
(István F.)
aprilie 11, 2022, 2:35pm
19
Ce font folosesti ? Eu vad ca se schimba font-ul la prima incarcare.
SSebastian
(Sava Sebastian-Florin)
aprilie 11, 2022, 2:37pm
20
Banuiala mea tot de css se leaga, dar am incercat si cu listener de window on load (care teoretic face trigger cand tot dom-ul + resursele sunt incarcate).
Rubik, google fonts. Ideea e ca imi da mereu 160 height… nici daca las sans-serif pe 50px nu am height-ul ala.