javascript - Window is not Defined on Prerender - Stack Overflow

admin管理员组

文章数量:1345179

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

Share Follow edited Jul 11, 2014 at 19:04 Sophie Alpert 143k3636 gold badges226226 silver badges243243 bronze badges asked Jul 11, 2014 at 14:40 KomboKombo 2,38133 gold badges3535 silver badges6464 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

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

本文标签： javascriptWindow is not Defined on PrerenderStack Overflow