在服务器端渲染中未定义的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被替换为通过prop传递的实际数据：

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

数据提供者呈现路由器上下文而不是子节点...

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

问题在于服务器渲染期间未定义上下文。 就像它从未被传递过一样。 然后，当javascript捆绑包到达客户端时，它将使用该窗口。 INITIAL_STATE变量，并从服务器停止的地方开始。 它可以工作，但是我也可能不做任何服务器端渲染。 有什么我想念的吗？ 还是renderToString（）不支持上下文？

Answer 1

如果已定义props.data则应设置初始状态。

确实，您甚至不应该在组件内部包含window.__INITIAL_STATE__ 。 相反，无论在客户端呈现<SsrDataProvider>任何位置，都应该传递data <SsrDataProvider> 。

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