Question

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

├── 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的Wrapper。现在很简单：

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。

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

Answer 2

在服务器上呈现时，不会定义

document - 尝试将React.render()调用包装在if(typeof window !== 'undefined') { }中。

Reactjs：文档未定义

2 个答案: