React 和 React Router - 一个非常基本和简单的 Cookie 横幅

Question

我正在研究 React 应用程序。我需要一个非常非常简单的 Cookie 横幅。通知网站使用 cookie 的信息。 npm 包中有各种（理论上简单的）解决方案，但它们都在我的项目中造成了一些问题。我的印象是它们设计过度了，尽管它们应该很简单。

我的项目主要基于 React 和 React Router。

Answer 1

好的。我们有 React 和 React Router (react-router-dom)。我们需要：

react-cookie npm install react-cookie
反应模式npm install react-modal
bootstrap npm install bootstrap

ModalCookies.js分量：

import React from 'react';
import {
    Link
} from 'react-router-dom';
import { useCookies } from "react-cookie";
import Modal from 'react-modal';
import '../modal.css';

function ModalCookies() {

    const [cookies, setCookie] = useCookies(["allowcookies"]);

    function handleCookie() {
        setCookie("allowcookies", true, { path: "/", expires: new Date(Date.now() + (100 * 24 * 60 * 60 * 1000)) });
    }

    function closeModal() {
        handleCookie();
    }

    return (
        <Modal isOpen={cookies.allowcookies ? false : true} className="Modal" overlayClassName="Overlay">
            <h6>PRIVACY & COOKIES POLICY</h6>
            <p className="text-justify">
                I use cookies to personalize content, ads and to analyze the traffic.
                I also share information about your use of my website with my social media,
                advertising and analytics partners who may combine it with other information that you have provided to them or that they have collected from your use of their services.
                If you continue browsing, it means that you accept the use of cookies on this website.
            </p>
            <div className="text-right">
                <button
                    className="btn btn-secondary mr-2 mb-2"
                    onClick={closeModal}>
                    OK
                </button>
                <Link to="/privacy"
                    className="btn btn-outline-secondary mb-2"
                    onClick={closeModal}>
                    Learn More
                </Link>
            </div>
        </Modal>
    );
}

export default ModalCookies;

modal.css 文件:

.Modal {
    position: absolute;
    top: auto;
    left: 15%;
    right: 15%;
    bottom: 15%;
    border: 1px solid rgb(100, 100, 100);
    background: rgb(255, 255, 255);
    outline: none;
    padding: 40px;
    z-index: 1;
  }

.Overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.60);
  }

用React Router管理应用程序主视图的文件（例如：Home.js或App.js）（摘录):

//...
import ModalCookies from './ModalCookies';
//...
  </Route>

 </Switch>

 <ModalCookies />

 <Footer />

</Router>
//...

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import Modal from 'react-modal';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
Modal.setAppElement('#root');

ReactDOM.render(
  <React.StrictMode>
    <CookiesProvider>
      <App />
    </CookiesProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

它在我的项目中效果很好。欢迎任何意见或问题。

React 和 React Router - 一个非常基本和简单的 Cookie 横幅

React and React Router - A really very basic and simple Cookie Banner

javascript

cookies

banner

reactjs

react-router