React HOC kursora pozīcijas kods un koda skaidrojums

Šajā rakstā es Jums parādīšu kā izveidot React kodu kursora pozīcijas izsekošanai ekrānā. Kods nosaka kursora pozīciju un attēlo to aplikācijas ekrānā ar konkrētām peles kursora koordinātēm.
Protams esmu izveidojis jaunu mapi, atveris to izmantojot Visual Studio Code , atveram termināli VSC un izveidojis jaunu aplikāciju ievadot terminālī React aplikācijas izveidošanas komandu

npx create-react-app kursors

tad pārejam uz mapi:

cd kursors

un palaižam aplikāciju pārlūkā:

npm start

Strādāsim ar App.js tāpec dzēšam laukā visu šī faila noklusējuma kodu un varam sākt jaunas aplikācijas komponenta izstrādi…

Raktam kodu:

Paskaidrošu koda darbību sadalot to gabalos, bet raksta beigās publicēšu pilnu aplikācijas kkodu.

Lai šis viss darbotos būs nepieciešami daži āķi – gan useState, gan arī useEffect kurus importējam aplikācijas sākumā:

import React, { useState, useEffect } from 'react';

Definējam jaunu const funkciju ar iepakotu komponentu un prop stāvokli ar useState kursora pozīcijas noteikšanai:







// HOC (Higher-Order Component) jeb Augstākās kārtas komponents
// Ņem IepakotsKomponents kā argumentu un atgriež jaunu komponentu
const arKursoru = IepakotsKomponents => { // Jaunais komponents
return props => {
// Izveidojam stāvokli kursora pozīcijai
const [kursoraPozīcija, setKursoraPozīcija] = useState({ x: 0, y: 0 });






Izveidojam funkciju, kura tiek izsaukta, kad tiek pakustināta pele








// Funkcija, kas tiek izsaukta, kad notiek kustība ar peli
const apstrādātKustībuArPeli = notikums => {






Atjauninam kursora pozīciju






// Atjauninām kursora pozīciju
setKursoraPozīcija({ x: notikums.clientX, y: notikums.clientY }); };






Pievienojam useEffect notikuma klausītāju






// Pievienojam notikuma klausītāju kustībai ar peli
useEffect(() => {






Pie komponenta noņemšanas notīrām notikuma klausītāju








window.addEventListener('mousemove', apstrādātKustībuArPeli); // Notīrām notikuma klausītāju, kad komponents tiek noņemts return () => { window.removeEventListener('mousemove', apstrādātKustībuArPeli); }; }, []);






Atgriežam iepakoto komponentu ar injicētu kursora pozīciju un oriģinālajiem propiem








// Atgriežam iepakoto komponentu ar injicētu kursora pozīciju un oriģinālajiem propiem return <IepakotsKomponents kursoraPozīcija={kursoraPozīcija} {...props} />; }; };






Izņem kursora pozīciju no propiem






// Mūsu iepakotais komponents function MansKomponents(props) { // Izņemam kursora pozīciju no propiem const { kursoraPozīcija } = props; return ( <div> Mana komponenta saturs <div>Kursora pozīcija: ({kursoraPozīcija.x}, {kursoraPozīcija.y})</div> </div> ); }






Izmantojam HOC jaunam komponentam un pievienojam galveno APP komponentu








// Izveidojam jaunu komponentu, izmantojot HOC arKursoru const MansKomponentsArKursoru = arKursoru(MansKomponents); // Galvenais App komponents function App() { return <MansKomponentsArKursoru />; }






Tātad Šis piemērs parāda, kā var izmantot HOC (Higher-Order Component) 
jeb Augstākās kārtas komponentu React aplikācijā. 
arKursoru ir HOC, kas ņem MansKomponents kā argumentu un atgriež jaunu komponentu. 
Jaunais komponents izmanto useEffect un useState, lai sekotu līdzi kursora pozīcijai un injicētu to iepakotajam komponentam kā kursoraPozīcija propu. 
Iepakotais komponents var izmantot šo propu, lai parādītu kursora pozīciju.





Tas varētu būt noderīgi situācijās, kad ir nepieciešams parādīt kursora pozīciju lietotājam vai izmantot to kāda cita funkcionalitātei.


Lai padarītu šo piemēru par praktiski izmantojamu aplikāciju, būtu nepieciešams papildināt to ar papildu funkcionalitāti un saskarni atbilstoši konkrētajai lietojumprogrammai. Piemēram, varētu pievienot iespēju lietotājam izvēlēties no vairākiem iepakotajiem komponentiem vai pievienot papildu HOC, lai injicētu citus datus vai funkcionalitāti.


Konkrētie papildinājumi un pielāgojumi ir atkarīgi no tā, kādai lietojumprogrammai šis piemērs tiek pielietots un kādas prasības ir attiecīgajai lietojumprogrammai.


Pilns mūsu apspriestās aplikācijas kods:






import React, { useState, useEffect } from 'react';

// HOC (Higher-Order Component) jeb Augstākās kārtas komponents
// Ņem IepakotsKomponents kā argumentu un atgriež jaunu komponentu
const arKursoru = IepakotsKomponents => {
  // Jaunais komponents
  return props => {
    // Izveidojam stāvokli kursora pozīcijai
    const [kursoraPozīcija, setKursoraPozīcija] = useState({ x: 0, y: 0 });

    // Funkcija, kas tiek izsaukta, kad notiek kustība ar peli
    const apstrādātKustībuArPeli = notikums => {
      // Atjauninām kursora pozīciju
      setKursoraPozīcija({ x: notikums.clientX, y: notikums.clientY });
    };

    // Pievienojam notikuma klausītāju kustībai ar peli
    useEffect(() => {
      window.addEventListener('mousemove', apstrādātKustībuArPeli);
      // Notīrām notikuma klausītāju, kad komponents tiek noņemts
      return () => {
        window.removeEventListener('mousemove', apstrādātKustībuArPeli);
      };
    }, []);

    // Atgriežam iepakoto komponentu ar injicētu kursora pozīciju un oriģinālajiem propiem
    return <IepakotsKomponents kursoraPozīcija={kursoraPozīcija} {...props} />;
  };
};

// Mūsu iepakotais komponents
function MansKomponents(props) {
  // Izņemam kursora pozīciju no propiem
  const { kursoraPozīcija } = props;
  return (
    <div>
      Mana komponenta saturs
      <div>Kursora pozīcija: ({kursoraPozīcija.x}, {kursoraPozīcija.y})</div>
    </div>
  );
}

// Izveidojam jaunu komponentu, izmantojot HOC arKursoru
const MansKomponentsArKursoru = arKursoru(MansKomponents);

// Galvenais App komponents
function App() {
  return <MansKomponentsArKursoru />;
}

export default App;






 




 Loading




Noderīgs raksts? Dalies ar citiem:
Dalīties: