时间戳

首页 > 解决方案 > 如何获取 cookie 并根据值有条件地渲染 JSX 组件

reactjs - 如何获取 cookie 并根据值有条件地渲染 JSX 组件

问题描述

我正在使用“react-cookie”包：

https://www.npmjs.com/package/react-cookie

根据本文档，我构建了以下 JSX 组件，它们成功创建了一个名为“cookieConsent”的 cookie，并在按下接受按钮时将其值存储为“true”。

const CookiePopup = () => {

  const [cookies, setCookie] = useCookies(false);

  const onClick = () => {
    setCookie('cookieConsent', true)
  }

  return (

    <div className="cookie-popup-container">
      <div className="cookie-consent-text">
        <p className="cookie-consent-paragraph">By using our website, you agree to our <a className="cookie-consent-link" href="/cookies" target="_blank">cookie policy</a>.</p>
      </div>
      <div className="cookie-consent-button">
        <button className="cookie-button" onClick={onClick}>Yep, sure thing!</button>
      </div>
    </div>

  )
}

然后我想做的是有条件地渲染这个组件。如果 cookieConsent cookie 存在并且值为“真”（它总是如此），我希望这个组件为空。如果它不存在，我想渲染组件。

我正在尝试像这样进行条件渲染：

{ cookies.value !== true ?  <div className="cookie-popup-container">
      <div className="cookie-consent-text">
        <p className="cookie-consent-paragraph">By using our website, you agree to our <a className="cookie-consent-link" href="/cookies" target="_blank">cookie policy</a>.</p>
      </div>
      <div className="cookie-consent-button">
        <button className="cookie-button" onClick={onClick}>Yep, sure thing!</button>
      </div>
    </div> : null }

但是，它在 'cookies.value' 的 'value' 位中出现了一个 'unexpected token，expected","。

我认为这可能是因为这是一个子组件，我正在尝试在父组件中呈现它 - 所以也许我需要在我的父组件中以不同的方式呈现它，而不仅仅是导入。

作为参考，这是我在“主页”组件中的操作方式：

import CookiePopup from '../elements/cookie-popup'

const Homepage = () => {

  return (
    <>
      <CookiePopup />
    </>
  )
}

任何建议或指示将不胜感激！我第一次使用 cookie，所以我确定我遗漏了一些明显的东西。

标签： reactjscookies

解决方案

您可以useCookies()留空或指定您希望使用的 cookie 的名称。

const [cookies, setCookie] = useCookies();

有条件地渲染

{ cookies.cookieConsent && (
  <div>{"your HTML Here"}</div>
)}

推荐阅读