窗口未在Prerender上定义

Question

我正在使用Rails通过react-rails(1.0.0pre)试验React.js,并且在渲染依赖于窗口大小的响应元素时遇到了一些麻烦.每当我创建一个使用窗口的组件时,我都会收到以下错误:[React::Renderer] ReferenceError: window is not defined尝试将组件渲染到我的Rails视图中的字符串时.例如,我的组件:

/** @jsx React.DOM */

var Example = React.createClass({  
  getInitialState: function() {    
    return { 
      windowWidth: $(window).width()
    };
  },

  render: function () {

    return (
      <div className="example-wrapper">
        {this.props.label}
        {this.state.windowWidth}
      </div>
    );
  }
});

以及我对道具的看法:

<%= react_component('Example', {name: 'Window width is:'}, { prerender: true }) %>

是否有可能在React的虚拟DOM中引用该窗口？

Answer 1

在预渲染的服务器上,你无法查询窗口的宽度 - 你怎么能这样？服务器无法访问该信息,因此无法将其包含在发送的HTML中.相反,您希望获得一些初始状态,即使用该组件进行渲染,然后在您知道窗口对象可访问时进行更新:

var Example = React.createClass({  
  getInitialState: function() {    
    return { 
      windowWidth: 0  // or "loading..." or whatever
    };
  },

  componentDidMount: function() {
    // Triggers a re-render
    this.setState({
      windowWidth: $(window).width()
    });
  },

  render: function () {
    return (
      <div className="example-wrapper">
        {this.props.label}
        {this.state.windowWidth}
      </div>
    );
  }
});