0

我试图在服务器端渲染期间为一个简单的应用程序传递数据。

我在服务器和客户端都有这个数据提供者，我使用全局变量将初始状态注入客户端：

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() 不支持上下文？

4

1 回答 1

0

您应该根据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__
    }
  }
}
于 2017-01-05T18:03:01.480 回答