☰

Reactjs: ドキュメントが定義されていません 質問する

tag-icon • tag-icon javascript reactjs
Reactjs: ドキュメントが定義されていません 質問する

非常にシンプルな 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 を埋めるラッパーを作成することです。現時点では非常に簡単です。

メインラッパー.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 のようです。

ベストアンサー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"));
}

おすすめ記事