如何通过react-cookie-consent在React应用程序中使用Cookie Consent

收藏

知识点掌握了，还需要不断练习才能熟练运用。下面米云给大家带来一个文章开发实战，手把手教大家学习《如何通过react-cookie-consent在React应用程序中使用Cookie Consent》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

简介
隐私和数据保护是现代网站的基本考虑因素，因此在 react 应用程序中添加 cookie 同意横幅可确保遵守数据隐私法规，例如 gdpr。在本教程中，我们将使用react-cookie-consent库轻松地将cookie同意横幅添加到我们的应用程序中，并对其进行自定义以使用户能够控制cookie首选项。

第 1 步：设置你的 react 项目

如果您尚未设置 react 项目，请使用以下命令创建一个项目：

npx create-react-app cookie-consent-demo
cd cookie-consent-demo

第2步：安装react-cookie-consent

react-cookie-consent 库简化了向您的应用添加 cookie 同意横幅的过程。使用npm或yarn安装它：

npm install react-cookie-consent
# or
yarn add react-cookie-consent

第 3 步：基本实施

安装库后，转到主应用程序文件（通常是 app.js 或 app.tsx）并添加 cookie 同意组件。这是基本设置：

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;

第 4 步：自定义同意横幅

要使同意横幅更具吸引力或添加“全部接受”和“拒绝”等选项，您可以扩展该组件。

<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>

结论
添加 cookie 同意横幅对于用户隐私和法规遵从性至关重要，而 react-cookie-consent 使其易于实现。您可以进一步自定义横幅，以符合您网站的设计和消息传递，并响应用户的选择，以增强对基于 cookie 的功能的控制。

到这里，我们也就讲完了《如何通过react-cookie-consent在React应用程序中使用Cookie Consent》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注米云公众号，带你了解更多关于的知识点！

版本声明 本文转载于：dev.to 如有侵犯，请联系删除

Win11系统出现ERR_ADDRESS_UNREACHABLE错误的解决方法