点击按钮关闭React Cookies组件的实现问题求助

你可以通过React状态控制组件的条件渲染实现点击关闭效果，以下是可直接复用的实现代码：

import React, { useState } from "react";
import { Content, ContentContainer, CookiesWrapper, Title } from "./styles";
// 请替换为你实际的按钮组件引入路径
import HoverableDefaultRoundBorderButton from "@/components/HoverableDefaultRoundBorderButton";

export function Cookies() {
  // 初始化状态：从本地存储读取用户是否已同意，未同意则显示组件
  const [isVisible, setIsVisible] = useState(() => {
    return !localStorage.getItem("cookies_agreed");
  });

  const handleClose = () => {
    setIsVisible(false);
    // 存储用户同意状态，刷新页面后不会再次弹出
    localStorage.setItem("cookies_agreed", "1");
  };

  // 状态为隐藏时直接返回空，组件不渲染
  if (!isVisible) return null;

  return (
    <CookiesWrapper>
      <ContentContainer>
        <Title>
          <span>We use cookies</span>
        </Title>
        <Content>
          <span>Read more on our Privacy Policy.</span>
          <HoverableDefaultRoundBorderButton
            onClick={handleClose}
            text="I agree"
          />
        </Content>
      </ContentContainer>
    </CookiesWrapper>
  );
}

注意事项 #

• 请确保你的HoverableDefaultRoundBorderButton组件正确透传了onClick属性到内部的原生按钮元素，否则点击事件不会触发，按钮组件的基础写法参考：

function HoverableDefaultRoundBorderButton({ onClick, text }) {
  return (
    <button 
      onClick={onClick}
      // 你的按钮样式逻辑
      style={{ borderRadius: '999px', padding: '8px 16px', border: '1px solid #333' }}
    >
      {text}
    </button>
  )
}

• 如果需要父组件全局控制Cookies弹窗的显隐，可以将状态提升到父组件，通过props传递控制参数：

// 父组件调用示例
import { Cookies } from './components/Cookies'

function App() {
  const [showCookies, setShowCookies] = useState(() => !localStorage.getItem("cookies_agreed"));

  const handleCookiesClose = () => {
    setShowCookies(false);
    localStorage.setItem("cookies_agreed", "1");
  };

  return (
    <div className="app">
      {/* 页面其他内容 */}
      <Cookies isVisible={showCookies} onClose={handleCookiesClose} />
    </div>
  )
}

// 改造后的Cookies组件
export function Cookies({ isVisible, onClose }) {
  if (!isVisible) return null;

  return (
    <CookiesWrapper>
      <ContentContainer>
        <Title>
          <span>We use cookies</span>
        </Title>
        <Content>
          <span>Read more on our Privacy Policy.</span>
          <HoverableDefaultRoundBorderButton
            onClick={onClose}
            text="I agree"
          />
        </Content>
      </ContentContainer>
    </CookiesWrapper>
  )
}

如果需要设置同意状态的有效期，只需要在存储时额外写入时间戳，初始化状态时判断当前时间和存储时间的差值是否超过有效期即可。

内容的提问来源于stack exchange，提问作者kate