Next.js服务器呈现组件窗口对象

Question

我有一个组件，它通过js google库处理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在服务器中呈现组件时，是否有任何回调，我可以在其中放置一些将在客户端执行的代码？在那里我可以访问窗口对象。

Answer 1

onComponentDidMount是访问window的正确位置，因为组件只在客户端挂载(但呈现同时发生在客户机和服务器上)。

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