Javascript Reactjs：文档未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35068451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reactjs: document is not defined
提问by Matt
I have a pretty simple react project setup:
我有一个非常简单的反应项目设置：
├── app.js
├── components
│?? ├── MainWrapper.js
│?? └── html.js
├── package.json
└── server.js
The application is started by:
该应用程序是通过以下方式启动的：
node server.js
Which uses the express server and renders markup for an HtmlComponent in html.js:
它使用 express 服务器并为 html.js 中的 HtmlComponent 呈现标记：
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;
The goal is to create a Wrapper that will fill the 'root' div. It's very simple right now:
目标是创建一个包装器来填充“根”div。现在非常简单：
MainWrapper.js:
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"));
When I run node server.js there's an exception:
当我运行 node 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)
I do not understand why document is not defined. It seems it's simple javascript.
我不明白为什么没有定义文档。这似乎是简单的 javascript。
回答by duxfox--
if you're rendering this server side, there will be no "document" object. try wrapping it in the following:
如果您正在渲染此服务器端，则不会有“文档”对象。尝试将其包装在以下内容中：
if (typeof window !== 'undefined') {
React.render(<MainWrapper />, document.getElementById("root"));
}
this will check to see if a window object is present - meaning its in the browser - which also means that the document object is present
这将检查窗口对象是否存在 - 意味着它在浏览器中 - 这也意味着文档对象存在
to keep this answer valid
保持这个答案有效
React has been split into multiple packages; react, react-dom, prop-types, and possibly others that I'm not aware of. If using newer versions of react, you'll also need the react-dompackage for this to work - so this becomes:
React 已经拆分成多个包；react, react-dom, prop-types, 可能还有其他我不知道的。如果使用较新版本的反应，您还需要该react-dom包才能工作 - 所以这变成：
import ReactDOM from 'react-dom';
if (typeof window !== 'undefined') {
ReactDOM.render(<MainWrapper />, document.getElementById("root"));
}
回答by Donald
documentwon't be defined when rendering on the server - try wrapping the React.render()call in if(typeof window !== 'undefined') { }.
document在服务器上渲染时不会被定义 - 尝试将React.render()调用包装在if(typeof window !== 'undefined') { }.
