Next.js服務器呈現組件窗口對象

我有一個組件通過js google api庫處理Google登錄。Next.js服務器呈現組件窗口對象

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作爲我的服務器，組件正在服務器中呈現。

我把一些日誌，發現渲染方法正在服務器中調用，componentDidMount永遠不會被調用。

當next.js在服務器中呈現組件時，是否有任何回調，我可以放置一些將在客戶端執行的代碼？我可以在哪裏訪問窗口對象。

來源

2017-10-12 jonathanrz

它從來沒有被調用過（componentDidMount）?.根據next.js docs'這個生命週期方法只會在客戶端執行'。你是否檢查組件是否實際安裝在客戶端？ –

@PieroDivasto它永遠不會被調用。由於在服務器端調用了渲染方法，我認爲組件正在安裝在服務器端。我的問題是，如果有任何回調方法，我可以把我的代碼，將在客戶端執行時，該組件被安裝在服務器端。 – jonathanrz

onComponentDidMount是訪問window正確的位置，作爲成分是僅安裝客戶端（但呈現發生兩個客戶端&服務器上）。

也許這不是完整的組件，但它看起來不像this.onGoogleLoginSuccess中的任何東西，因爲this會引用該環境中的反應實例。

來源

2017-10-13 01:17:36

我沒有提供實現，因爲它不是必需的例子，但我已經實現了這個方法。我的代碼正在工作，但我添加了一個快速服務器在路由中進行一些驗證，現在onComponentDidMount不再被調用。 – jonathanrz

我發現問題是由我的js文件中的錯誤引起的，因爲Chrome無法解析文件，所以它停止執行並且從未執行onComponentDidMount。我會接受你的回答，因爲那是因爲她確信問題不在next.js流程中。謝謝你的幫助。 – jonathanrz

Next.js服務器呈現組件窗口對象

回答

相關問題