2

我在我的 react/redux 应用程序中使用 react-cookie v2。要设置 cookie，您需要将组件包装在 HOCwithCookies(component)中，然后您可以使用它this.props.cookies.set('first_cookie', someCookie);来设置 cookie。

但是，我想在我的所有组件都可以用来设置 cookie 的 util 文件中设置我的 cookie。例如。

storageUtil.js
export const setToCookies = (key, value, options) => {
    cookies.set(key, value, options);
};

这个 util 文件不能被包装，withCookies因此没有直接的 cookie。我可以从使用组件 ( setToCookies(cookiesInstance, key, value, options)) 中传入 cookie 实例，但如果可能的话，我宁愿在 util 文件中导入一个 cookie 实例。

这必须是一个非常常见的用例（用于处理 util 文件中的 cookie），我只是想不出这样做的最佳方法。

4

1 回答 1

0

在寻找通用解决方案时，我将编写我发现的两种方法。如果提供更好的解决方案，我将更改接受的答案。

解决方案1：

withCustomCookies.js

import React from 'react';
import { withCookies } from 'react-cookie';

export function withCustomCookies(Component) {

    return (props) => {
        // CookieComponent needs a capital letter bc of JSX
        let ExtendedCookieComponent = withCookies(withEncapsulatedCookies(Component));

        return (
            <ExtendedCookieComponent
                {...props} />
        );
    };
}

export function withEncapsulatedCookies(Component) {

    return (props) => {
        // Only expose our own cookies methods defined in this scope
        const {
            // Dont expose cookies in using component
            cookies, // eslint-disable-line no-unused-vars
            ...cleanedProps
        } = props;

        function getFromCookies(key) {
            // Stuff to always do when getting a cookie
            return cookies.get(key);
        }

        function setToCookies(key, value, options) {
            // Stuff to always do when setting a cookie
            cookies.set(key, value, options);
        }

        return (
            <Component
                getFromCookies={getFromCookies}
                setToCookies={setToCookies}
                {...cleanedProps} /> // All Props except for cookies
        );
    };
}

用作：

  1. 导入和包装export default withCustomCookies(Component);
  2. 在组件内部这样使用this.props.getFromCookies(COOKIE_NAME);

解决方案2：

使用常规的 cookieUtils 文件并传入 cookie：

cookieUtils.js
export const setToCookies = (cookies, key, value, options) => {
   // Stuff to always do when setting a cookie
   cookies.setCookie(key, value, options);
};

用于：

  1. 在您的组件中导入 setToCookies 并在您的组件 ( withCookies(NameOfComponent)) 上使用 withCookies。
  2. 使用组件中的方法作为setToCookies(this.props.cookies, key, value, options);
于 2017-08-16T14:42:39.393 回答