React-toggle,带有带有已编译 gatsby 构建的 react-cookie
React-toggle, with react-cookie with a compiled gatsby build
我正在尝试在已编译的 Gatsby 构建中使用 react-toggle
和 react-cookie
。
对于那些不知道的人,Gatsby 将 ReactJS 编译成静态输出(基本上是平原 HTML,在客户端有反应。
我基本上想使用 React-toggle 根据 cookie 值在 checked/unchecked 之间切换。
这里的挑战在于,因为代码编译为静态输出,它似乎编译了 运行 服务器 side/before,所以 defaultChecked 需要从它自己的函数中访问。 我们不想直接访问cookie,反正它是未定义的。
const Toggle = ({cookieName}) => {
const [cookie, setCookie] = useCookies([cookieName]);
const getCookieValue = () => typeof cookie[cookieName] === "undefined" ? false : cookie[cookieName] === "true" ? true : false;
const setCookieValue = (e) => setCookie(cookieName, e.target.checked, {path: '/'});
return (
<ToggleWrap>
<ReactToggle
defaultChecked={getCookieValue()}
icons={{
checked: <ToggleText>Option 1</ToggleText>,
unchecked: <ToggleText>Option 2</ToggleText>
}}
onChange={setCookieValue}
/>
</ToggleWrap>
)
};
即使 cookie 更改,defaultChecked 始终相同,这就是问题所在。 (始终为假).
好的,你们这些漂亮的人,我用我的脑袋解决了它。
const Toggle = ({metricString, imperialString, cookieName}) => {
const [cookieValue, setCookieValue] = useCookies([cookieName]);
const [checked, setChecked] = useState(false);
const setCookie = (e) => {
setChecked(JSON.parse(e.target.checked));
setCookieValue(cookieName, e.target.checked, {path: '/'});
};
useEffect(() => {
const getCookieValue = () => typeof cookieValue[cookieName] === "undefined" ? false : cookieValue[cookieName] === "true" ? true : false;
setChecked(getCookieValue());
}, [])
return (
<ToggleWrap>
<StyledToggle
checked={checked}
icons={{
checked: <ToggleText>{imperialString}</ToggleText>,
unchecked: <ToggleText>{metricString}</ToggleText>
}}
onChange={setCookie}
/>
</ToggleWrap>
)
};
查看 useEffect()
的用法,我提醒自己它是在客户端调用的!
我正在尝试在已编译的 Gatsby 构建中使用 react-toggle
和 react-cookie
。
对于那些不知道的人,Gatsby 将 ReactJS 编译成静态输出(基本上是平原 HTML,在客户端有反应。
我基本上想使用 React-toggle 根据 cookie 值在 checked/unchecked 之间切换。
这里的挑战在于,因为代码编译为静态输出,它似乎编译了 运行 服务器 side/before,所以 defaultChecked 需要从它自己的函数中访问。 我们不想直接访问cookie,反正它是未定义的。
const Toggle = ({cookieName}) => {
const [cookie, setCookie] = useCookies([cookieName]);
const getCookieValue = () => typeof cookie[cookieName] === "undefined" ? false : cookie[cookieName] === "true" ? true : false;
const setCookieValue = (e) => setCookie(cookieName, e.target.checked, {path: '/'});
return (
<ToggleWrap>
<ReactToggle
defaultChecked={getCookieValue()}
icons={{
checked: <ToggleText>Option 1</ToggleText>,
unchecked: <ToggleText>Option 2</ToggleText>
}}
onChange={setCookieValue}
/>
</ToggleWrap>
)
};
即使 cookie 更改,defaultChecked 始终相同,这就是问题所在。 (始终为假).
好的,你们这些漂亮的人,我用我的脑袋解决了它。
const Toggle = ({metricString, imperialString, cookieName}) => {
const [cookieValue, setCookieValue] = useCookies([cookieName]);
const [checked, setChecked] = useState(false);
const setCookie = (e) => {
setChecked(JSON.parse(e.target.checked));
setCookieValue(cookieName, e.target.checked, {path: '/'});
};
useEffect(() => {
const getCookieValue = () => typeof cookieValue[cookieName] === "undefined" ? false : cookieValue[cookieName] === "true" ? true : false;
setChecked(getCookieValue());
}, [])
return (
<ToggleWrap>
<StyledToggle
checked={checked}
icons={{
checked: <ToggleText>{imperialString}</ToggleText>,
unchecked: <ToggleText>{metricString}</ToggleText>
}}
onChange={setCookie}
/>
</ToggleWrap>
)
};
查看 useEffect()
的用法,我提醒自己它是在客户端调用的!