Next.js 服务器渲染组件 window 对象

Question

我有一个组件通过 js google api 库处理 google 登录。

export default class Index extends React.Component {
  componentDidMount() {
    window.onGoogleLoginSuccess = this.onGoogleLoginSuccess.bind(this)
  }

  render() {
    return (
      <div
          className="g-signin2"
          data-onsuccess="onGoogleLoginSuccess"
          data-theme="dark"
      />
  }
}

因为我使用 express 作为我的服务器，组件正在服务器中呈现。

我放了一些日志，发现在服务器中调用了render方法，而从未调用过componentDidMount。

当next.js 在服务器中呈现组件时，是否有任何回调，我可以在其中放置一些将在客户端执行的代码？我可以在哪里访问 window 对象。

Answer 1

onComponentDidMount 是访问 window 的正确位置，因为该组件仅安装在客户端（但渲染发生在客户端和服务器上).

也许这不是完整的组件，但看起来 this.onGoogleLoginSuccess 在您的示例中不存在任何内容，因为 this 会在该上下文中引用反应实例。

Next.js 服务器渲染组件 window 对象

Next.js server rendered component window object

reactjs

server-side-rendering

next.js