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!