在服務器端渲染中未定義的React上下文

Question

我想在服務器端呈現一個簡單的應用程序期間傳遞數據。

我都在服務器和客戶端該數據提供者和我使用全局變量注入初始狀態到客戶端：

import React, { Component } from 'react'; 

export default class SsrDataProvider extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: window.__INITIAL_STATE__ }; 
    } 

    getChildContext() { 
    return { data: this.state.data }; 
    } 

    render() { 
    return this.props.children; 
    } 
} 

SsrDataProvider.propTypes = { 
    children: React.PropTypes.object, 
}; 

SsrDataProvider.childContextTypes = { 
    data: React.PropTypes.object, 
}; 

在服務器中，窗口。 INITIAL_STATE被通過道具傳遞的實際數據代替：

renderToString(<SsrDataProvider {...renderProps} data={data} />) 

和數據提供者呈現路由器環境，而不是孩子......

render() { 
    return <RouterContext {...this.props} />; 
} 

的問題是，上下文ISN在服務器渲染期間沒有定義。這就像它從來沒有被傳入過。然後，當JavaScript包到達客戶端時，它使用該窗口。 INITIAL_STATE變量，並在服務器停止的地方啓動。它的工作原理，但我可能不會做任何服務器端渲染。有什麼我失蹤？或者renderToString（）不支持上下文？

Answer 1

如果已定義，您應該根據props.data設置初始狀態。

真的，你甚至不應該包括組件內部的window.__INITIAL_STATE__。相反，你應該在data道具中傳遞你在客戶端渲染<SsrDataProvider>的位置。

export default class SsrDataProvider extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: props.data // || window.__INITIAL_STATE__ 
    } 
    } 
}