非常にシンプルな 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"));
}