如何在React.js中使用react-cookie获取Cookie？

我来给你一步步讲清楚怎么操作，不管你用类组件还是函数组件都能搞定～

第一步：先安装react-cookie库 #

首先得把这个库装到你的项目里，用npm或者yarn都行：

npm install react-cookie
# 或者用yarn
yarn add react-cookie

类组件写法（官方示例详解） #

官方给的类组件示例我给你拆解一下关键点，方便你理解：

import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import NameForm from './NameForm';

class App extends Component {
  // 先给props做类型校验，确保cookies是必填的Cookies实例
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  componentWillMount() {
    // 从props里拿到cookies对象
    const { cookies } = this.props;
    // 用cookies.get()获取名为'name'的Cookie，要是不存在就用默认值'Ben'
    this.state = { name: cookies.get('name') || 'Ben' };
  }

  handleNameChange(name) {
    const { cookies } = this.props;
    // 顺便提下设置Cookie的写法，第三个参数是配置项，比如过期时间、生效路径这些
    cookies.set('name', name, { path: '/' });
    this.setState({ name });
  }

  render() {
    return <NameForm name={this.state.name} onNameChange={this.handleNameChange.bind(this)} />;
  }
}

// 一定要用withCookies高阶组件包裹你的组件，这样cookies才会被注入到props里
export default withCookies(App);

这里最核心的就是**withCookies高阶组件**，它会把cookies实例作为props传递给你的组件，之后你就能用cookies.get('cookie名称')来获取对应的Cookie值了。

函数组件写法（更适合现代React） #

如果你的项目用的是函数组件+Hook，那用useCookies钩子会更简洁：

import React from 'react';
import { useCookies } from 'react-cookie';
import NameForm from './NameForm';

function App() {
  // 调用useCookies钩子，传入要关注的Cookie名称数组，拿到cookies对象和设置Cookie的方法
  const [cookies, setCookie] = useCookies(['name']);

  // 直接通过cookies.name获取Cookie值，不存在的话可以给默认值
  const userName = cookies.name || 'Ben';

  const handleNameChange = (name) => {
    setCookie('name', name, { path: '/' });
  };

  return <NameForm name={userName} onNameChange={handleNameChange} />;
}

export default App;

这种写法不用处理高阶组件，直接用Hook就能拿到Cookie，代码清爽很多～

小提示 #

不管是类组件还是函数组件，cookies.get()方法都可以传第二个参数作为默认值，比如cookies.get('name', { defaultValue: 'Ben' })，和||的效果类似，但写法更规范。

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