Rumah > Artikel > hujung hadapan web > Cara menggunakan Persetujuan Kuki dalam Apl React dengan persetujuan-kuki-reaksi
Pengenalan
Privasi dan perlindungan data adalah pertimbangan penting untuk tapak web moden, jadi menambahkan sepanduk kebenaran kuki pada apl React anda memastikan pematuhan terhadap peraturan privasi data, seperti GDPR. Dalam tutorial ini, kami akan menggunakan perpustakaan react-cookie-consent untuk menambahkan sepanduk persetujuan kuki dengan mudah pada aplikasi kami dan menyesuaikannya untuk memberi pengguna kawalan ke atas pilihan kuki.
Langkah 1: Sediakan Projek React Anda
Jika anda belum menyediakan projek React lagi, buat projek dengan arahan berikut:
npx create-react-app cookie-consent-demo cd cookie-consent-demo
Langkah 2: Pasang react-cookie-consent
Pustaka react-cookie-consent memudahkan penambahan sepanduk kebenaran kuki pada apl anda. Pasang menggunakan npm atau benang:
npm install react-cookie-consent # or yarn add react-cookie-consent
Langkah 3: Pelaksanaan Asas
Setelah anda memasang pustaka, pergi ke fail apl utama anda (biasanya App.js atau App.tsx) dan tambahkan komponen persetujuan kuki. Berikut ialah persediaan asas:
import React from "react"; import CookieConsent from "react-cookie-consent"; function App() { return ( <div className="App"> <h1>Welcome to My Website</h1> {/* Basic Cookie Consent */} <CookieConsent location="bottom" buttonText="I understand" cookieName="myWebsiteCookieConsent" style={{ background: "#2B373B" }} buttonStyle={{ color: "#4e503b", fontSize: "13px" }} expires={150} > This website uses cookies to enhance your browsing experience.{" "} <a href="/privacy-policy" style={{ color: "#f5e042" }}> Learn more </a> </CookieConsent> </div> ); } export default App;
Langkah 4: Menyesuaikan Sepanduk Persetujuan
Untuk menjadikan sepanduk persetujuan lebih menarik atau menambah pilihan seperti "Terima Semua" dan "Tolak", anda boleh melanjutkan komponen.
<CookieConsent location="bottom" enableDeclineButton declineButtonText="Decline" buttonText="Accept All" cookieName="myWebsiteCookieConsent" style={{ background: "#000" }} buttonStyle={{ color: "#fff", fontSize: "14px" }} declineButtonStyle={{ color: "#fff", background: "#c0392b", fontSize: "14px", }} expires={365} onAccept={() => { console.log("Cookies accepted"); }} onDecline={() => { console.log("Cookies declined"); }} > We use cookies to improve user experience. By clicking "Accept All," you consent to the use of cookies. </CookieConsent>
Kesimpulan
Menambah sepanduk persetujuan kuki adalah penting untuk privasi pengguna dan pematuhan kawal selia, dan react-cookie-consent menjadikannya mudah untuk dilaksanakan. Anda boleh memperibadikan lagi sepanduk untuk diselaraskan dengan reka bentuk dan pemesejan tapak web anda dan bertindak balas kepada pilihan pengguna untuk kawalan yang dipertingkatkan ke atas ciri berasaskan kuki.
Atas ialah kandungan terperinci Cara menggunakan Persetujuan Kuki dalam Apl React dengan persetujuan-kuki-reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!