Tambahkan Kesan Pop Timbul pada Apl React.js Anda

Tambahkan Kesan Pop Timbul pada Apl React.js Anda

Pop timbul ialah cara terbaik untuk menarik perhatian pengguna anda dan memaparkan maklumat penting. Anda boleh menggunakannya untuk perkara seperti mesej pengesahan dan mesej ralat. Atau anda boleh menggunakannya untuk menunjukkan maklumat tambahan tentang elemen pada halaman.





Dalam React, terdapat dua cara untuk membuat pop timbul: menggunakan cangkuk React atau menggunakan modul luaran.



MAKEUSEOF VIDEO OF THE DAY

Cara Membuat Pop-Up dalam React.js

pertama, buat apl reaksi mudah . Selepas itu, anda boleh menambah pop timbul menggunakan salah satu daripada dua kaedah. Anda boleh menggunakan cangkuk React atau modul luaran.





1. Menggunakan React Hooks

Pendekatan cangkuk adalah lebih mudah dan hanya memerlukan beberapa baris kod.

Pertama, anda perlu mencipta fungsi yang akan membuka pop timbul. Anda boleh menentukan fungsi ini dalam komponen yang akan memaparkan pop timbul.



Seterusnya, anda perlu menggunakan cangkuk useState untuk mencipta pembolehubah keadaan untuk pop timbul. Anda boleh menggunakan pembolehubah keadaan ini untuk menentukan sama ada pop timbul harus dibuka atau tidak.

Akhir sekali, anda perlu menambah butang pada komponen anda yang akan mencetuskan pop timbul. Apabila anda mengklik butang ini, tetapkan pembolehubah keadaan kepada benar, yang akan menyebabkan pop timbul muncul.



Lihat kod untuk pendekatan ini:

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;

Pertama, kod ini mengimport cangkuk useState daripada pustaka tindak balas teras. Kemudian, fungsi Contoh menggunakan cangkuk useState untuk mencipta pembolehubah keadaan yang dipanggil isOpen. Pembolehubah keadaan ini menentukan sama ada pop timbul harus dibuka atau tidak.



Seterusnya, tambahkan butang pada komponen yang akan mencetuskan pop timbul. Apabila anda mengklik butang ini, pembolehubah keadaan akan ditetapkan kepada benar, yang akan menyebabkan pop timbul muncul.

Akhir sekali, tambahkan butang pada komponen yang akan menutup pop timbul. Apabila anda mengklik butang ini, pembolehubah keadaan akan ditetapkan kepada palsu, yang akan menyebabkan pop timbul hilang.

tambah aplikasi ke tv pintar vizio
halaman bertindak balas dengan satu butang dan membuka pop timbul

2. Menggunakan Modul Luaran

Anda juga boleh membuat pop timbul dalam React menggunakan modul luaran. Terdapat banyak modul yang tersedia yang boleh anda gunakan untuk tujuan ini.

Satu modul popular ialah react-modal. react-modal ialah modul ringkas dan ringan yang membolehkan anda mencipta dialog modal dalam React.

Untuk menggunakan react-modal, anda perlu memasangnya terlebih dahulu menggunakan npm:

npm install react-modal

Setelah anda memasang react-modal, anda boleh mengimportnya ke dalam komponen React anda:

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;

Dalam kod ini, anda masih menggunakan cangkuk React tetapi dengan modul react-modal. Dengan modul react-modal, anda boleh menambah lebih banyak fungsi pada pop timbul. Seperti yang anda lihat, kod ini sangat serupa dengan pendekatan sebelumnya. Satu-satunya perbezaan ialah anda kini menggunakan komponen ReactModal daripada react-modal dan bukannya mencipta sendiri.

Pertama, anda perlu mengimport modul react-modal. Kemudian, anda menggunakan komponen ReactModal untuk membungkus kandungan pop timbul anda. Gunakan prop isOpen untuk menentukan sama ada modal harus terbuka atau tidak.

halaman bertindak balas dengan pop timbul

Sebaik sahaja anda telah mencipta pop timbul anda, anda mungkin mahu menambah ciri tambahan padanya. Sebagai contoh, anda mungkin mahu menutup pop timbul apabila pengguna mengklik di luarnya.

Untuk melakukan ini, anda perlu menggunakan prop onRequest komponen react-modal. Prop ini mengambil fungsi sebagai nilainya. Fungsi ini akan dijalankan apabila pengguna mengklik di luar modal.

Sebagai contoh, untuk menutup pop timbul apabila pengguna mengklik di luarnya, anda akan menggunakan kod berikut:

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;

Fungsi yang kami hantar ke prop onRequest hanya menetapkan pembolehubah keadaan isOpen kepada palsu. Ini akan menyebabkan modal ditutup.

Anda juga boleh menambah prop lain pada komponen ReactModal untuk menyesuaikannya lagi. Untuk senarai penuh prop, anda boleh menyemak dokumentasi react-modal.

di mana saya boleh membaca buku komik dalam talian secara percuma

Menambah Penggayaan dalam Pop-Up

Sebaik sahaja anda telah mencipta tetingkap timbul anda, anda mungkin mahu menambahkan sedikit gaya padanya. Terdapat banyak cara untuk menggayakan komponen React, tetapi kami akan menumpukan pada gaya sebaris.

Gaya sebaris ialah gaya yang boleh anda tambahkan terus pada komponen React. Untuk menambah gaya sebaris, anda perlu menggunakan sifat gaya. Sifat ini mengambil objek sebagai nilainya, dengan kunci adalah sifat gaya dan nilai adalah nilai gaya.

Sebagai contoh, untuk menambah warna latar belakang putih dan lebar 500px pada pop timbul, anda akan menggunakan kod berikut:

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;

Dalam kod ini, anda menambah sifat gaya pada elemen div dengan sifat backgroundColor dan lebar. Anda juga boleh gunakan Tailwind CSS dalam apl bertindak balas untuk menggayakan pop timbul anda.

Tingkatkan Kadar Penukaran Dengan Tetingkap Timbul

Pop timbul boleh membantu meningkatkan kadar penukaran dengan memaparkan maklumat penting kepada pengguna. Sebagai contoh, anda boleh menggunakan pop timbul untuk memaparkan kod diskaun atau tawaran istimewa. Anda juga boleh menggunakan pop timbul untuk mengumpul alamat e-mel untuk surat berita anda. Menambah pop timbul pada apl React anda ialah cara terbaik untuk meningkatkan kadar penukaran.

Anda juga boleh menggunakan aplikasi React anda secara percuma pada halaman GitHub dengan mudah.