React.js:文档未定义 [英] Reactjs: document is not defined
问题描述
我有一个非常简单的react项目设置:
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
使用快速服务器并在html.js中为HtmlComponent渲染标记:
Which uses the express server and renders markup for an HtmlComponent in 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;
目标是创建一个将填充"root" div的包装器.现在非常简单:
The goal is to create a Wrapper that will fill the 'root' div. It's very simple right now:
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"));
当我运行node server.js时，有一个例外:
When I run node server.js there's an 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)
我不明白为什么未定义文档.看来这是简单的javascript.
I do not understand why document is not defined. It seems it's simple javascript.
推荐答案
如果要呈现此服务器端，则不会有"document"文件.目的.尝试将其包装在以下内容中:
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
使此答案有效
较新版本的React已拆分为多个软件包，您现在需要从 react-dom 导入:
Newer versions of React have been split into multiple packages, you will need to import from react-dom now:
import ReactDOM from 'react-dom';
if (typeof window !== 'undefined') {
ReactDOM.render(<MainWrapper />, document.getElementById("root"));
}
这篇关于React.js:文档未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
