Pop-up'lar, kullanıcılarınızın dikkatini çekmenin ve önemli bilgileri görüntülemenin harika bir yoludur. Bunları onay mesajları ve hata mesajları gibi şeyler için kullanabilirsiniz. Veya bir sayfadaki bir öğe hakkında ekstra bilgi göstermek için bunları kullanabilirsiniz.

React'te açılır pencereler oluşturmanın iki yolu vardır: React kancalarını kullanmak veya harici bir modül kullanmak.

React.js'de Açılır Pencereler Nasıl Oluşturulur

Birinci, basit bir tepki uygulaması oluştur. Bundan sonra, iki yöntemden birini kullanarak bir açılır pencere ekleyebilirsiniz. React kancalarını veya harici bir modülü kullanabilirsiniz.

1. Tepki Kancalarını Kullanma

Kanca yaklaşımı daha basittir ve yalnızca birkaç satır kod gerektirir.

İlk olarak, açılır pencereyi açacak bir işlev oluşturmanız gerekir. Bu işlevi açılır pencereyi görüntüleyecek bileşende tanımlayabilirsiniz.

Ardından, açılır pencere için bir durum değişkeni oluşturmak üzere useState kancasını kullanmanız gerekir. Açılır pencerenin açık olup olmayacağını belirlemek için bu durum değişkenini kullanabilirsiniz.

instagram viewer

Son olarak, bileşeninize açılır pencereyi tetikleyecek bir düğme eklemeniz gerekir. Bu düğmeyi tıklattığınızda, durum değişkenini doğru olarak ayarlayın, bu açılır pencerenin görünmesine neden olur.

Bu yaklaşımın koduna bir göz atın:

içe aktarmak Tepki, { useState } itibaren 'tepki';
işlevÖrnek() {
sabit [isOpen, setIsOpen] = kullanımDevlet(YANLIŞ);


geri dönmek (
<div>
<düğme onClick={() => setIsOpen (doğru)}>
 Pop-up'ı aç
</button>


{açık && (
<div>
<div>
 Bu dır-dir açılır pencerenin içeriği.
</div>
<düğme onClick={() => setIsOpen (yanlış)}>
 Açılır pencereyi kapat
</button>
</div>
 )}
</div>
 );
}
ihracatvarsayılan Örnek;

İlk olarak, bu kod, çekirdek tepki kitaplığından useState kancasını içe aktarır. Ardından, Örnek işlevi, isOpen adlı bir durum değişkeni oluşturmak için useState kancasını kullanır. Bu durum değişkeni açılır pencerenin açık olup olmayacağını belirler.

Ardından, açılır pencereyi tetikleyecek bileşene bir düğme ekleyin. Bu düğmeyi tıklattığınızda, durum değişkeni doğru olarak ayarlanacak ve bu da açılır pencerenin görünmesine neden olacaktır.

Son olarak, açılır pencereyi kapatacak bileşene bir düğme ekleyin. Bu düğmeyi tıklattığınızda, durum değişkeni yanlış olarak ayarlanacak ve bu da açılır pencerenin kaybolmasına neden olacaktır.

2. Harici Modül Kullanma

Harici bir modül kullanarak React'te açılır pencereler de oluşturabilirsiniz. Bu amaçla kullanabileceğiniz birçok modül mevcuttur.

Popüler modüllerden biri tepki kiplidir. tepki-modal, React'te kalıcı iletişim kutuları oluşturmanıza izin veren basit ve hafif bir modüldür.

tepki kipini kullanmak için, önce onu npm kullanarak yüklemeniz gerekir:

npm düzenlemek tepki kipli

tepki kipini yükledikten sonra, onu React bileşeninize aktarabilirsiniz:

içe aktarmak ReactModal itibaren 'tepki kipli';
içe aktarmak Tepki, { useState } itibaren 'tepki';
işlevÖrnek() {
sabit [isOpen, setIsOpen] = kullanımDevlet(YANLIŞ);


geri dönmek (
<div>
<düğme onClick={setIsOpen}>Modal'ı aç</button>
<ReactModal
 isOpen={isAçık}
 içerikEtiketi="Örnek Kip"
>
 Bu dır-dir modun içeriği.
</ReactModal>
</div>
 );
}
ihracatvarsayılan Örnek;

Bu kodda, hala React kancalarını kullanıyorsunuz, ancak reaksiyon kipli modülüyle. tepki kipli modülü ile açılır pencereye daha fazla işlevsellik ekleyebilirsiniz. Gördüğünüz gibi, kod önceki yaklaşıma çok benziyor. Tek fark, artık kendi bileşeninizi oluşturmak yerine tepki-modal bileşeninden ReactModal bileşenini kullanıyor olmanızdır.

İlk olarak, tepki kipli modülünü içe aktarmanız gerekir. Ardından, açılır pencerenizin içeriğini sarmak için ReactModal bileşenini kullanırsınız. Modalın açık olup olmayacağını belirlemek için isOpen pervanesini kullanın.

Açılır pencerenizi oluşturduktan sonra, ona ek özellikler eklemek isteyebilirsiniz. Örneğin, kullanıcı pencerenin dışına tıkladığında açılır pencereyi kapatmak isteyebilirsiniz.

Bunu yapmak için, tepki kipli bileşenin onRequestClose pervanesini kullanmanız gerekir. Bu pervane, değeri olarak bir işlev alır. Bu işlev, kullanıcı modun dışına tıkladığında çalışır.

Örneğin, kullanıcı pencerenin dışına tıkladığında açılır pencereyi kapatmak için aşağıdaki kodu kullanırsınız:

içe aktarmak Tepki, { useState } itibaren 'tepki';
içe aktarmak ReactModal itibaren 'tepki kipli';
işlevÖrnek() {
sabit [isOpen, setIsOpen] = kullanımDevlet(YANLIŞ);


geri dönmek (
<div>
<düğme onClick={() => setIsOpen (doğru)}>
 Modal'ı aç
</button>
<ReactModal
 isOpen={isAçık}
 içerikEtiketi="Örnek Kip"
 onRequestClose={() => setIsOpen(YANLIŞ)}
>
 Bu dır-dir modun içeriği.
</ReactModal>
</div>
 );
}
ihracatvarsayılan Örnek;

onRequestClose prop'a ilettiğimiz işlev, basitçe isOpen durum değişkenini false olarak ayarlar. Bu, modalın kapanmasına neden olacaktır.

ReactModal bileşenini daha da özelleştirmek için başka aksesuarlar da ekleyebilirsiniz. Donanımların tam listesi için tepki kipli belgelerine göz atabilirsiniz.

Açılır Pencerelere Stil Ekleme

Açılır pencerenizi oluşturduktan sonra, ona biraz stil eklemek isteyebilirsiniz. React bileşenlerine stil vermenin birçok yolu vardır, ancak biz satır içi stillere odaklanacağız.

Satır içi stiller, doğrudan bir React bileşenine ekleyebileceğiniz stillerdir. Satır içi stiller eklemek için style özelliğini kullanmanız gerekir. Bu özellik, değeri olarak bir nesneyi alır; burada anahtarlar, stil özellikleridir ve değerler, stil değerleridir.

Örneğin, bir açılır pencereye beyaz arka plan rengi ve 500 piksel genişlik eklemek için aşağıdaki kodu kullanırsınız:

içe aktarmak Tepki itibaren 'tepki';
işlevÖrnek() {
geri dönmek (
<div stili={{backgroundColor: 'beyaz', Genişlik: '500 piksel' }}>
 Bu dır-dir açılır pencerenin içeriği.
</div>
 );
}
ihracatvarsayılan Örnek;

Bu kodda, style özelliğini div öğesine backgroundColor ve genişlik özellikleriyle eklersiniz. ayrıca yapabilirsin tepki uygulamasında Tailwind CSS kullanın pop-up'larınıza stil vermek için.

Açılır Pencerelerle Dönüşüm Oranını Artırın

Pop-up'lar, kullanıcıya önemli bilgileri göstererek dönüşüm oranlarını artırmaya yardımcı olabilir. Örneğin, bir indirim kodunu veya özel bir teklifi görüntülemek için bir açılır pencere kullanabilirsiniz. Bülteniniz için e-posta adreslerini toplamak için bir açılır pencere de kullanabilirsiniz. React uygulamanıza bir açılır pencere eklemek, dönüşüm oranlarını artırmanın harika bir yoludur.

Ayrıca React uygulamanızı GitHub sayfalarında kolayca ücretsiz olarak dağıtabilirsiniz.