I'm experimenting with React.js with Rails via react-rails(1.0.0pre) and have had some troubles pre-rendering responsive elements that rely on the window size. Whenever I create a ponent that uses window, I get the following error: [React::Renderer] ReferenceError: window is not defined when attempting to render the ponent to a string in my Rails view. For example, my ponent:

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

and my view with props:

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

Is it possible to reference the window in React's virtual DOM?

I'm experimenting with React.js with Rails via react-rails(1.0.0pre) and have had some troubles pre-rendering responsive elements that rely on the window size. Whenever I create a ponent that uses window, I get the following error: [React::Renderer] ReferenceError: window is not defined when attempting to render the ponent to a string in my Rails view. For example, my ponent:

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

and my view with props:

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

Is it possible to reference the window in React's virtual DOM?

• javascript
• reactjs

• 1 window only exists inside a browser, and prerender is done on the server; there is no browser and no "window" to which it is rendering. Prerendering is rendering a string with no browser environment. Anything relying on window should be done after the ponent is mounted, at which point you know the ponent is in a real browser environment. – Ross Allen Commented Jul 11, 2014 at 18:35

1 Answer 1

On the server when prerendering, you can't query the window's width – how could you? The server doesn't have access to that information and so it couldn't possibly be included in the HTML that's sent down. Instead, you want to have some initial state that the ponent is rendered with, and then update upon mounting when you know the window object is accessible:

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

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

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