如何绕过Gatsby构建期间未定义的窗口?如果检查不起作用

Question

我的一个道具使用条件运算符来确定nav元素的颜色。但是该语句需要window.location.pathname，这会在生成过程中导致此错误。

WebpackError:ReferenceError:窗口未定义

我想做的是从wordpress中提取段塞，如果它与当前页面段塞匹配，它将显示活动颜色。

这是我的代码片段，其中检查了样式组件内部的窗口。这证实了有条件的工作，它应该在发展中。

const noBrowser = () => typeof window === "undefined"
color:  ${props=> noBrowser()?'#000':(props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};

但这似乎并没有解决缺少浏览器窗口的问题，我仍然会遇到同样的错误。

有人对如何避开这个问题有什么建议吗？这些页面是通过graphql从wordpress slugs生成的。链接将生成为图标。

Answer 1

你试过这样的东西吗？

color:  ${props => noBrowser ? '#000' : (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};

或者直接反转条件：

color:  ${props=> typeof window !== "undefined" ? (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff') : '#000':};