Darbas su DOM elementais " React" sistemoje iš pradžių gali atrodyti sudėtingas, ypač kai reikia valdyti vaizdo elementus. Šioje pamokoje daugiausia dėmesio skirsime tam, kaip valdyti vaizdo elementą "React" programoje naudojant useRef. Sužinosite, kaip gauti nuorodas į DOM elementus ir efektyviai jas naudoti kuriant pasirinktinius vaizdo įrašų valdiklius.
Pagrindinės žinios
- Naudodami useRef galite kurti ir valdyti tiesiogines nuorodas į DOM elementus "React" programoje.
- Naudojimasis funkcija useEffect padeda reaguoti į komponentų pokyčius ir atlikti veiksmus po atvaizdavimo.
- Galite naudoti naudotojo sąveikas vaizdo elementų atkūrimui valdyti, ypač susijusiam su garsu.
Žingsnis po žingsnio
1. Į programėlę įterpkite vaizdo elementą
Taip pat galite įjungti standartinius valdiklius pridėdami atributą controls. Taip galėsite tiesiogiai naršyklėje atkurti vaizdo įrašą.
2. Gaukite prieigą prie vaizdo įrašo elemento naudodami useRef
Norėdami gauti prieigą prie vaizdo elemento per useRef, turite sukurti nuorodą savo komponento logikoje.
Dabar sukūrėte nuorodą, nukreipiančią į vaizdo elementą.
3. Nustatykite nuorodą po pirmojo atvaizdavimo
Norėdami iš tikrųjų naudoti nuorodą, turite įsitikinti, kad ji teisingai nustatyta po pirmojo atvaizdavimo. Tam naudojame useEffect kabliuką. Ji iškviečiama po to, kai komponentas buvo atvaizduotas. Pridėkite komandą console.log, kad patikrintumėte, ar teisingai nustatyta nuoroda.
Dabar galite pamatyti, ar videoRef.current yra vaizdo elementas.
4. Paleiskite ir pristabdykite vaizdo įrašą
Norėdami paleisti vaizdo įrašą, naudokite metodą play(). Atkreipkite dėmesį, kad šis metodas grąžina pažadą (Promise). Taip pat svarbu tam tikru momentu dirbti su naudotojo sąveika, kad būtų galima paleisti vaizdo įrašą. Tam pridėkite mygtuką, kuriuo naudotojas gali paleisti vaizdo įrašą.
Įsitikinkite, kad naudotojas taip pat sąveikauja su puslapiu, kad vaizdo įrašas būtų paleistas tinkamai. Jei vaizdo įrašas nesustabdomas, galite susidurti su klaidos pranešimu.
5. Automatinio atkūrimo atributas "Muted" (nutildytas)
Jei norite, kad vaizdo įrašas būtų atkuriamas automatiškai, vaizdo elementas makete turi būti nutildytas.
6. Apibendrinkite veiksmus ir funkcijas
Apibendrinkite tai, ko išmokote: Apibendrinimas: Į savo programą įterpėte vaizdo elementą, sukūrėte nuorodą naudodami useRef, nustatėte nuorodą po atvaizdavimo ir panaudojote metodą play(). Čia svarbi naudotojo sąveika ir atributas "muted" vaizdo įrašams, kurie turi būti atkuriami automatiškai.
Apibendrinimas
Apskritai išmokote, kaip naudoti useRef ir useEffect vaizdo elementui valdyti "React" sistemoje. Galimybė nustatyti nuorodas į DOM elementus yra galingas metodas, leidžiantis kurti pasirinktinius vaizdo įrašų valdiklius ir pagerinti naudotojo patirtį.
Dažnai užduodami klausimai
Kaip naudoti useRef kitam DOM elementui? Galite naudoti useRef bet kuriam DOM elementui, kaip ir vaizdo elementui.
Kaip pakeisti vaizdo įrašo garsumą? Garsumą galite valdyti naudodami vaizdo įrašo videoRef.current savybę volume.
Ką daryti, jei vaizdo įrašas negrojamas?Įsitikinkite, kad įvyko naudotojo sąveika, ir patikrinkite, ar vaizdo įrašas nustatytas kaip prislopintas.
Ar galiu su useRef valdyti kelis vaizdo elementų elementus?Taip, galite sukurti kelias nuorodas, atlikdami kelis useRef skambučius ir kiekvienam vaizdo elementui priskirdami atskirą nuorodą.
