Reactjs：文档未定义答案

【问题标题】：Reactjs: document is not definedReactjs：文档未定义
【发布时间】：2016-05-06 05:45:08
【问题描述】：

我有一个非常简单的 react 项目设置：

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

应用程序由以下人员启动：

node server.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;

目标是创建一个填充“根”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"));

当我运行 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)

我不明白为什么没有定义文档。看起来很简单的javascript。

【问题讨论】：

你在渲染这个服务器端吗？
相关：stackoverflow.com/q/60629258/12860895

标签： javascript reactjs

【解决方案1】：

如果您正在渲染此服务器端，则不会有“文档”对象。尝试将其包装在以下内容中：

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

这将检查窗口对象是否存在 - 意味着它在浏览器中 - 这也意味着文档对象存在

保持此答案有效

较新版本的 React 已拆分为多个包，您现在需要从 react-dom 导入：

import ReactDOM from 'react-dom';

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

【讨论】：

嗨，阿卜杜勒。我按照您的建议包装了 React.render(...) 。我仍然遇到同样的错误。
你有构建过程吗？你重建了吗？你重启服务器了吗？尝试所有这些步骤
好的。我跑了 npm 重建。由于某种原因，它花了几次。我没有收到错误...必须以某种方式执行此服务器端。我会调查的。
很高兴我能帮上忙！我第一次学习react时遇到了这个问题
想通了。我没有使用字符串“未定义”，而只是未定义

【解决方案2】：

在服务器上渲染时不会定义document - 尝试将React.render() 调用包装在if(typeof window !== 'undefined') { } 中。

【讨论】：

【解决方案3】：

确保将此代码文档块添加到测试文件的顶部

/**
 * @jest-environment jsdom
 */

【讨论】：