javascript - 窗口未在 Prerender 上定义

Question

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

/** @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>
    );
  }
});

和我的 Prop View :

<%= 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>
    );
  }
});