javascript - 功能性 react 组件上的窗口对象出现问题

Question

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

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

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

ReferenceError: window is not defined

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

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

Answer 1

引用Next.js wiki

Next.js is universal, which means it executes code first server-side, then client-side. The window object is only present client-side, so if you absolutely need to have access to it in some React component, you should put that code in componentDidMount. This lifecycle method will only be executed on the client. You may also want to check if there isn't some alternative universal library which may suit your needs.

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>;
}