时间戳

首页 > 解决方案 > 功能性反应组件上的窗口对象问题

javascript - 功能性反应组件上的窗口对象问题

问题描述

我需要访问window我的反应组件中的对象以从查询字符串中获取某些内容。这是我的组件的样子：

export function MyComponent() {
  return (
    <div>
      Display the qs: {(window && window.location.search) || 'nothing'}
    </div>
  )
}

如果我运行应用程序然后访问我需要访问窗口的页面，这一切都很好，但是如果我在需要窗口的页面上启动应用程序，我会收到以下错误：

ReferenceError：未定义窗口

到目前为止，我看到的大多数解决方案都使用componentWillMount来解决问题。所以我的问题是，如何在功能组件中解决这个问题？或者不使用生命周期方法的最佳方法是什么？

不确定这是否相关，但我也在使用 NextJS。

标签： javascriptreactjsnext.js

解决方案

请参阅Next.js 维基

Next.js 是通用的，这意味着它首先在服务器端执行代码，然后是客户端。window 对象仅存在于客户端，因此如果您绝对需要在某些 React 组件中访问它，您应该将该代码放在 componentDidMount 中。此生命周期方法将仅在客户端上执行。您可能还想检查是否没有其他可能适合您需求的通用库。

export function MyComponent() {
  const isAvailable = useRef(false);

  useEffect(() => {
    isAvailable.current = typeof window !== "undefined" && window.location.search;
  }, []);

  return <div>Display the qs: {isAvailable.current || 'nothing'}</div>;
}

推荐阅读