我正在尝试在服务器端渲染期间传递一个简单应用程序的数据。
我在服务器和客户端都有这个数据提供程序,并且我使用全局变量将初始状态注入(inject)客户端:
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,
};
在服务器中,window.INITIAL_STATE 被替换为通过 prop 传入的实际数据:
renderToString(<SsrDataProvider {...renderProps} data={data} />)
并且数据提供者呈现路由器上下文而不是子项...
render() {
return <RouterContext {...this.props} />;
}
问题在于服务器渲染期间未定义上下文。就好像它根本没有被传入一样。然后,当 javascript 包到达客户端时,它使用 window.INITIAL_STATE 变量并从服务器中断的地方继续。它有效,但我最好不进行任何服务器端渲染。我有什么遗漏的吗?或者 renderToString() 可能不支持上下文?
最佳答案
您应该根据 props.data
设置初始状态如果已定义。
实际上,您甚至不应该包含 window.__INITIAL_STATE__
组件内部。相反,您还应该传递 data
prop 无论您在何处渲染 <SsrDataProvider>
在客户端。
export default class SsrDataProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
data: props.data // || window.__INITIAL_STATE__
}
}
}
关于javascript - 服务器端渲染中未定义 React Context,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41463616/