React.js：文档未定义

小编典典

React.js：文档未定义

reactjs

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

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

该应用程序通过以下方式启动：

node server.js

它使用快速服务器并为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。

阅读 259

2020-07-22

共1个答案

小编典典

如果要呈现此服务器端，将没有“文档”对象。尝试将其包装在以下内容中：

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

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

使这个答案有效

React已经分为多个包；react，react-dom，prop- types，可能还有其他，我是不知道的。如果使用较新版本的react，您还需要此react-dom软件包才能正常工作-因此，它变为：

import ReactDOM from 'react-dom';

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

2020-07-22