Reactjs: le document n'est pas défini

J'ai un assez simple réagir projet d'installation:

├── app.js
├── components
│   ├── MainWrapper.js
│   └── html.js
├── package.json
└── server.js

L'application est démarrée par:

node server.js

Qui utilise l'express server et rend le balisage d'un HtmlComponent dans html.js:

import React from 'react';
import MainWrapper from './MainWrapper.js'

class HtmlComponent extends React.Component {
    render() {
        return (
            <html>
                <head>
                    <meta charSet="utf-8" />
                    <title>My Awesome Site</title>
                    <meta name="viewport" content="width=device-width, user-scalable=no" />
                    <link rel="stylesheet" href="awesome.css" />
                </head>
                <body>
                    <div id="root"></div>
                </body>
            </html>
        )
    }
}

export default HtmlComponent;

L'objectif est de créer un Wrapper qui permettra de combler le 'root' div. C'est très simple maintenant:

MainWrapper.js:

import React from 'react';
import ReactDOM from 'react-dom';

var MainWrapper = React.createClass ({
    render: function() {
        return (
            <button>go</button>
        )
    }
});

React.render(<MainWrapper />, document.getElementById("root"));

Quand je lance le nœud server.js il y a une exception:

/Users/me/Desktop/Simple/components/MainWrapper.js:36
_react2['default'].render(_react2['default'].createElement(MainWrapper, null), document.getElementById("root"));
                                                                               ^

ReferenceError: document is not defined
    at Object.<anonymous> (/Users/me/Desktop/Simple/components/MainWrapper.js:27:31)
    at Module._compile (module.js:425:26)
    at normalLoader (/Users/me/Desktop/Simple/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/me/Desktop/Simple/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/me/Desktop/Simple/components/Html.js:5:26)
    at Module._compile (module.js:425:26)

Je ne comprends pas pourquoi le document n'est pas défini. Il semble qu'il est simple javascript.

source d'informationauteur Matt

  1. 22

    si vous êtes le rendu de ce côté serveur, il n'y aura pas d'objet "document". essayez en l'enveloppant dans le texte suivant:

    if (typeof window !== 'undefined') {
    React.render(<MainWrapper />, document.getElementById("root"));
}

    il s'agira de vérifier pour voir si un objet de la fenêtre est présente (son sens dans le navigateur) si son dans le navigateur, puis l'objet document est présent

  2. 0

    document ne sera pas défini lors du rendu sur le serveur - essayez d'emballer la React.render() appel dans if(typeof window !== 'undefined') { }.