[英]Using react-cookie in a util file
I am using react-cookie v2 in my react/redux app. 我在我的react / redux应用程序中使用react-cookie v2。 To set a cookie you need to wrap the component in a HOC
withCookies(component)
, then you can use this.props.cookies.set('first_cookie', someCookie);
要设置cookie,您需要将组件包装在HOC
withCookies(component)
,然后可以使用this.props.cookies.set('first_cookie', someCookie);
to set a cookie. 设置一个cookie。
However, i would like to set my cookies in a util file that all my components can use to set cookies. 但是,我想在所有文件都可以用来设置cookie的util文件中设置cookie。 For example.
例如。
storageUtil.js
export const setToCookies = (key, value, options) => {
cookies.set(key, value, options);
};
This util file cannot be wrapped with withCookies
and therefore doesnt have the cookies directly. 该
withCookies
程序文件不能与withCookies
一起包装,因此不直接包含Cookie。 I could pass in the cookies instance from the using component ( setToCookies(cookiesInstance, key, value, options)
), but I would rather import a cookie instance in the util file if possible somehow. 我可以从using组件(
setToCookies(cookiesInstance, key, value, options)
)中传入cookie实例,但是我宁愿以某种方式在实用程序文件中导入cookie实例。
This has to be a very common usecase (to handle cookies in a util file), i just cannot figure out the best approach for doing this. 这必须是一个非常普通的用例(以处理util文件中的cookie),我只是不知道执行此操作的最佳方法。
I will write the two methods i found to work when searching for a generic solution. 我将编写在寻找通用解决方案时发现可以使用的两种方法。 If a better solution is provided i will change accepted answer.
如果提供更好的解决方案,我将更改接受的答案。
Solution 1: 解决方案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
);
};
}
Used as: 用作:
export default withCustomCookies(Component);
export default withCustomCookies(Component);
导入和包装export default withCustomCookies(Component);
this.props.getFromCookies(COOKIE_NAME);
this.props.getFromCookies(COOKIE_NAME);
Solution 2: 解决方案2:
Use a regular cookieUtils file and pass in the cookies: 使用常规的cookieUtils文件并传递cookie:
cookieUtils.js
export const setToCookies = (cookies, key, value, options) => {
// Stuff to always do when setting a cookie
cookies.setCookie(key, value, options);
};
Use as: 用于:
withCookies(NameOfComponent)
). withCookies(NameOfComponent)
)上使用withCookies。 setToCookies(this.props.cookies, key, value, options);
setToCookies(this.props.cookies, key, value, options);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.