在服务器端渲染中未定义的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__ 
    } 
    } 
}