Reactjs: документ не определен

Question

У меня есть довольно простая реакция настройки проекта:

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

приложение запускается с помощью:

node server.js 

который использует экспресс-сервер и делает разметку для HtmlComponent в html.js:

Целью является создание Wrapper, который заполнит «корень» div. Сейчас очень просто:

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

При запуске узла server.js есть исключение:

/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) 

Я не понимаю, почему документ не определен. Кажется, это просто javascript.

Answer 1

Если вы отризываете эту серверную сторону, объекта документа не будет. попробуйте обернув его в следующем:

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

это будет проверять, если объект окна присутствует (то есть его в браузере), если его в браузере, то объект документа присутствует

Answer 2

document вона 't быть определен при рендеринге на сервере - попробуйте обернуть вызов React.render() в if(typeof window !== 'undefined') { }.