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