React Cookie 是一个方便的 React 插件，用于处理浏览器 cookie。在本文中，我们将介绍如何安装和使用它。
安装
你可以使用 npm 来安装 React Cookie：
npm install react-cookie
使用
首先，在你的代码中导入 react-cookie 模块：
import { useCookies } from 'react-cookie';
该模块提供了一个名为 useCookies 的钩子函数，可以帮助我们在 React 组件中轻松地读取、设置和删除浏览器 cookie。
读取 cookie
使用 useCookies 钩子的 cookies 属性，可以获取当前页面的所有 cookie：
function MyComponent() { const [cookies] = useCookies(['cookie1', 'cookie2']); console.log(cookies); // { cookie1: 'value1', cookie2: 'value2' } return <div></div>; }
在上面的示例中，我们传递了一个包含两个 cookie 名称的数组给 useCookies，然后通过 cookies 属性获取了这两个 cookie 的值。
设置 cookie
要设置 cookie，可以使用 useCookies 钩子的 setCookie 函数。该函数接受三个参数：cookie 名称、cookie 值以及可选的配置对象。
-- -------------------- ---- ------- -------- ------------- - ----- --------- ---------- - ---------------------- ------------ -------- ------------------- - -------------------- ---- ------- - ----- --- --- - ------ - ----- ------- ------------------------------- --------------- ------ -- -展开代码
在上面的示例中，我们定义了一个 handleButtonClick 函数，它会调用 setCookie 函数来设置 cookie。
删除 cookie
要删除 cookie，可以使用 useCookies 钩子的 removeCookie 函数。该函数接受两个参数：cookie 名称和可选的配置对象。
-- -------------------- ---- ------- -------- ------------- - ----- --------- - ------------- - ------------------------ -------- ------------------- - ----------------------- - ----- --- --- - ------ - ----- ------- ---------------------------------- --------------- ------ -- -展开代码
在上面的示例中，我们定义了一个 handleButtonClick 函数，它会调用 removeCookie 函数来删除 cookie。
总结
React Cookie 是一个非常有用的插件，可以帮助我们轻松地处理浏览器 cookie。通过使用 useCookies 钩子，我们可以读取、设置和删除 cookie，让我们的代码更加简洁、易读和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35578
