使用useState和localstorage使div在关闭后只出现一次

使用useState和localStorage可以实现在关闭后div只出现一次的效果。

首先，useState是React中的一个Hook，用于在函数组件中添加状态。它接受一个初始值作为参数，并返回一个包含状态值和更新状态值的数组。我们可以使用useState来控制div的显示与隐藏。

localStorage是浏览器提供的一种存储数据的机制，可以将数据存储在浏览器的本地。我们可以使用localStorage来记录div是否已经显示过。

下面是实现的代码示例：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [showDiv, setShowDiv] = useState(true);

  useEffect(() => {
    const hasShown = localStorage.getItem('hasShown');
    if (hasShown) {
      setShowDiv(false);
    }
  }, []);

  const handleClose = () => {
    setShowDiv(false);
    localStorage.setItem('hasShown', true);
  };

  return (
    <div>
      {showDiv && (
        <div>
          这是要显示的div内容
          <button onClick={handleClose}>关闭</button>
        </div>
      )}
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们首先使用useState定义了一个showDiv状态，初始值为true，表示div默认显示。然后使用useEffect在组件挂载时检查localStorage中是否存在hasShown的值，如果存在则将showDiv设置为false，即关闭div的显示。

在关闭按钮的点击事件中，我们将showDiv设置为false，并使用localStorage.setItem将hasShown的值设置为true，表示div已经显示过。

这样，当用户关闭div后，再次刷新页面时，div将不会再次显示。

这个方法适用于需要在用户关闭某个元素后，保持其关闭状态的场景，例如弹窗、提示框等。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse