Reactjs: 문서가 정의되지 않았습니다.
리액션 프로젝트 설정은 매우 간단합니다.
├── app.js
├── components
│ ├── MainWrapper.js
│ └── html.js
├── package.json
└── server.js
애플리케이션은, 다음의 조작에 의해서 기동합니다.
node server.js
express 서버를 사용하여 html.js의 Html Component 마크업을 렌더링합니다.
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"));
노드 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인 것 같습니다.
이 서버측을 렌더링하는 경우, "실행" 객체는 없습니다.다음을 사용하여 포장해 보십시오.
if (typeof window !== 'undefined') {
React.render(<MainWrapper />, document.getElementById("root"));
}
윈도우 오브젝트가 존재하는지 확인합니다(브라우저에 있는 것을 의미함). 이는 문서 오브젝트가 존재함을 의미합니다.
이 대답을 유효하게 유지하다
새로운 버전의 React는 여러 패키지로 분할되어 있으므로 Import처가 필요합니다.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-environment jsdom */
이 정도면 충분해
언급URL : https://stackoverflow.com/questions/35068451/reactjs-document-is-not-defined
'programing' 카테고리의 다른 글
| 타이프 스크립트 데코레이터를 구현하는 방법 (0) | 2023.03.06 |
|---|---|
| CORS는 도메인 간 AJAX 요청을 안전하게 처리하는 방법입니까? (0) | 2023.03.06 |
| 얄팍한 비교는 반응에서 어떻게 작용합니까? (0) | 2023.03.06 |
| React.js에서의 onSubmit 설정 (0) | 2023.03.06 |
| Wordpress에 현재 연도 표시 (0) | 2023.03.06 |