Reactjs：文档未定义。

Question

Reactjs：文档未定义。

42

我有一个相当简单的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;

目标是创建一个包装器，用于填充“root”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。

- Matt

1

你是在服务器端渲染吗？ - Abdul Ahmad

相关: https://dev59.com/kFIH5IYBdhLWcg3wMapg - ATYB

4个回答

3

请确保在测试文件的顶部添加此代码文档块。

/**
 * @jest-environment jsdom
 */

- Babatope.Festus

解决了我在 Jest 中遇到的问题，非常感谢！ - aedwards22

2

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

- Donald

0

我在使用Jest进行单元测试时遇到了相同的错误。

/** @jest-environment jsdom */

这对我来说完成了任务

- Yash Gulani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abdul Ahmad · Accepted Answer

如果您正在服务器端渲染此内容，则将没有"document"对象。请尝试将其包装在以下内容中：

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