反应校验和无效：客户端屏幕高度属性不适用于服务器端

Question

我post再次讨论它并询问是否有解决方案可以在某些情况下跳过以下反应异常：

Uncaught Error: Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side.

我理解 React 试图保持完整性，但对于那种情况，它没有任何实际意义。

我的组件使用客户端上下文和屏幕分辨率呈现自身，服务器呈现使用 ExpressJS。

此处是名为 'App':

的简单 ui 组件的摘录

getDefaultProps: function() {
   // here is size by default
   return {
      size: 500
    }
  },
render: function() {
    return (
      <div><myComponent size={this.props.size} /></div>
    );
}

在客户端，类似于：

var height = // jquery stuff to get client screen height
//var height = 500; // in this case works as both client/server size are equal
React.render(App({size:height}), document);

在服务器端，类似于：

var markup = React.renderToString(APP());
res.send(markup);

欢迎任何避免烦人异常的想法。

谢谢

朱利安

Answer 1

一个选项可能是为服务器渲染和第一个客户端渲染设置相同的硬编码高度。然后用componentDidMount计算真实高度，用真实高度重新渲染组件。

类似于：

var = App React.createClass({
  getInitialState() {
    return {
      height: 500
    };
  },
  componentDidMount() {
    this.setState({height: $(window).height()});
  },
  render() {
    return <MyComponent height={this.state.height} />;
  }
});

React.render(<App />, document);

无论如何您可能都想这样做，因为您可能想收听 window 调整大小事件并传递新的高度。

反应校验和无效：客户端屏幕高度属性不适用于服务器端

react checksum was invalid : client screen height property not applicable on server side

reactjs

反应校验和无效：客户端屏幕高度 属性 不适用于服务器端

react checksum was invalid : client screen height property not applicable on server side

reactjs

反应校验和无效：客户端屏幕高度属性不适用于服务器端