Pievienojiet savai lietotnei React.js uznirstošos efektus

Uznirstošie logi ir lielisks veids, kā piesaistīt lietotāja uzmanību un parādīt svarīgu informāciju. Varat tos izmantot, piemēram, apstiprinājuma ziņojumiem un kļūdu ziņojumiem. Vai arī varat tos vienkārši izmantot, lai parādītu papildu informāciju par lapas elementu.

Programmā React ir divi veidi, kā izveidot uznirstošos logus: izmantojot React āķus vai ārēju moduli.

DIENAS VIDEO MAKEUSEOF

Kā izveidot uznirstošos logus pakalpojumā React.js

Pirmkārt, izveidojiet vienkāršu reaģēšanas lietotni . Pēc tam varat pievienot uznirstošo logu, izmantojot vienu no divām metodēm. Varat izmantot React āķus vai ārēju moduli.

1. React Hooks izmantošana

Āķu pieeja ir vienkāršāka un prasa tikai dažas koda rindiņas.

Pirmkārt, jums ir jāizveido funkcija, kas atvērs uznirstošo logu. Šo funkciju varat definēt komponentā, kas parādīs uznirstošo logu.

Pēc tam ir jāizmanto āķis useState, lai izveidotu uznirstošā loga stāvokļa mainīgo. Varat izmantot šo stāvokļa mainīgo, lai noteiktu, vai uznirstošajam logam ir jābūt atvērtam vai nē.

Visbeidzot, komponentam jāpievieno poga, kas aktivizēs uznirstošo logu. Noklikšķinot uz šīs pogas, iestatiet stāvokļa mainīgo vērtību uz True, kas parādīs uznirstošo logu.

Apskatiet šīs pieejas kodu:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

Pirmkārt, šis kods importē useState āķi no galvenās reakcijas bibliotēkas. Pēc tam funkcija Piemērs izmanto āķi useState, lai izveidotu stāvokļa mainīgo ar nosaukumu isOpen. Šis stāvokļa mainīgais nosaka, vai uznirstošajam logam jābūt atvērtam vai nē.

Pēc tam pievienojiet pogu komponentam, kas aktivizēs uznirstošo logu. Noklikšķinot uz šīs pogas, stāvokļa mainīgais tiks iestatīts uz True, kā rezultātā parādīsies uznirstošais logs.

Visbeidzot komponentam pievienojiet pogu, kas aizvērs uznirstošo logu. Noklikšķinot uz šīs pogas, stāvokļa mainīgais tiks iestatīts uz nepatiesu, kā rezultātā uznirstošais logs pazudīs.

reaģēt uz lapu ar vienu pogu un atvērts uznirstošais logs

2. Ārējā moduļa izmantošana

Varat arī izveidot uznirstošos logus programmā React, izmantojot ārēju moduli. Ir pieejami daudzi moduļi, kurus varat izmantot šim nolūkam.

Viens populārs modulis ir react-modal. react-modal ir vienkāršs un viegls modulis, kas ļauj izveidot modālus dialogus programmā React.

Lai izmantotu react-modal, vispirms tas jāinstalē, izmantojot npm:

npm install react-modal

Kad esat instalējis react-modal, varat to importēt savā React komponentā:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

Šajā kodā jūs joprojām izmantojat React āķus, bet ar react-modal moduli. Izmantojot react-modal moduli, uznirstošajam logam varat pievienot vairāk funkcionalitātes. Kā redzat, kods ir ļoti līdzīgs iepriekšējai pieejai. Vienīgā atšķirība ir tā, ka jūs tagad izmantojat ReactModal komponentu no react-modal, nevis veidojat savu.

Pirmkārt, jums ir jāimportē react-modal modulis. Pēc tam izmantojiet ReactModal komponentu, lai ietītu uznirstošā loga saturu. Izmantojiet isOpen balstu, lai noteiktu, vai modālam ir jābūt atvērtam vai nē.

Kad esat izveidojis uznirstošo logu, iespējams, vēlēsities tam pievienot papildu funkcijas. Piemēram, iespējams, vēlēsities aizvērt uznirstošo logu, kad lietotājs noklikšķina ārpus tā.

Lai to izdarītu, jums ir jāizmanto react-modal komponenta rekvizīts onRequest. Šī rekvizīta vērtība ir funkcija. Šī funkcija darbosies, kad lietotājs noklikšķinās ārpus modāla.

Piemēram, lai aizvērtu uznirstošo logu, kad lietotājs noklikšķina ārpus tā, izmantojiet šādu kodu:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

Funkcija, ko mēs nododam onRequest prop, vienkārši iestata isOpen stāvokļa mainīgo uz false. Tādējādi modāls tiks aizvērts.

ReactModal komponentam varat pievienot arī citus rekvizītus, lai to vēl vairāk pielāgotu. Lai iegūtu pilnu rekvizītu sarakstu, varat iepazīties ar react-modal dokumentāciju.

Stila pievienošana uznirstošajos logos

Kad esat izveidojis savu uznirstošo logu, iespējams, vēlēsities tam pievienot stilu. Ir daudzi veidi, kā veidot React komponentus, taču mēs koncentrēsimies uz iekļautajiem stiliem.

Iekļautie stili ir stili, kurus varat pievienot tieši React komponentam. Lai pievienotu iekļautos stilus, ir jāizmanto stila rekvizīts. Šis rekvizīts izmanto objektu kā savu vērtību, kur atslēgas ir stila īpašības un vērtības ir stila vērtības.

pārsūtīt failus no Windows uz Linux

Piemēram, lai uznirstošajam logam pievienotu baltu fona krāsu un 500 pikseļu platumu, izmantojiet šādu kodu:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

Šajā kodā jūs pievienojat stila rekvizītu div elementam ar rekvizītiem backgroundColor un platums. Jūs varat arī izmantojiet React lietotnē Tailwind CSS lai pielāgotu uznirstošos logus.

Palieliniet reklāmguvumu līmeni, izmantojot uznirstošos logus

Uznirstošie logi var palīdzēt palielināt reklāmguvumu līmeni, parādot lietotājam svarīgu informāciju. Piemēram, varat izmantot uznirstošo logu, lai parādītu atlaides kodu vai īpašo piedāvājumu. Varat arī izmantot uznirstošo logu, lai apkopotu e-pasta adreses savam informatīvajam izdevumam. Uznirstošā loga pievienošana savai React lietotnei ir lielisks veids, kā palielināt reklāmguvumu līmeni.

Varat arī viegli bez maksas izvietot savu React lietojumprogrammu GitHub lapās.