Reactjs:未定义文档

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

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

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

node server.js

它使用快速服务器并以 html 格式呈现 HtmlComponent 的标记.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;

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

当我运行节点服务器时.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。

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

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

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

/**
 * @jest-environment jsdom
 */

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

我在使用 Jest 的单元测试中遇到了同样的错误。

/** @jest-environment jsdom */

这为我完成了工作

相关内容

最新更新

热门标签：