불변 위반: _registerComponent(...): 대상 컨테이너가 DOM 요소가 아닙니다.
사소한 React 예제 페이지를 만든 후 다음 오류가 발생합니다.
검출되지 않은 오류:불변 위반: _registerComponent(...): 대상 컨테이너가 DOM 요소가 아닙니다.
제 코드는 다음과 같습니다.
/** @jsx React.DOM */
'use strict';
var React = require('react');
var App = React.createClass({
render() {
return <h1>Yo</h1>;
}
});
React.renderComponent(<App />, document.body);
HTML:
<html>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
이것은 무엇을 의미합니까?
까지, 「 」는 「 」입니다.document를 아직할 수 .왜냐하면요소가존재하지않기때문입니다.script가 그 에 있다head이 솔루션은 유효한 솔루션이지만scripthead렌더링 시에는 를 맨 아래에 배치하고 루트 컴포넌트를 다음과 같이 앞에 렌더링하는 것이 좋습니다.
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
,에는bundle.js 콜:
React.render(<App />, document.getElementById('root'));
항상 대신 네스트된 상태로 렌더링해야 합니다. 그렇지 않으면 모든 종류의 서드파티 코드(Google Font Loader, 브라우저 플러그인 등)에 의해 수정이 가능합니다.bodyReact가 예상하지 못한 경우 DOM 노드가 나타나며 추적 및 디버깅이 매우 어려운 이상한 오류가 발생합니다.이 문제에 대한 자세한 내용은 여기를 참조하십시오.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★의 장점script맨 아래에는 React 서버 렌더링을 프로젝트에 추가할 경우 스크립트가 로드될 때까지 렌더링을 차단하지 않습니다.
업데이트: (2015년 10월 7일| v0.14)
React.render사용ReactDOM.render★★★★★★ 。
예:
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
/index.html
<!doctype html>
<html>
<head>
<title>My Application</title>
<!-- load application bundle asynchronously -->
<script async src="/app.js"></script>
<style type="text/css">
/* pre-rendered critical path CSS (see isomorphic-style-loader) */
</style>
</head>
<body>
<div id="app">
<!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
</div>
</body>
</html>
/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
function run() {
ReactDOM.render(<App />, document.getElementById('app'));
}
const loadedStates = ['complete', 'loaded', 'interactive'];
if (loadedStates.includes(document.readyState) && document.body) {
run();
} else {
window.addEventListener('DOMContentLoaded', run, false);
}
(IE9+)
주의: 가지고 있다<script async src="..."></script>HTML 콘텐츠가 로드되기 전에 브라우저가 JavaScript 번들 다운로드를 시작합니다.
출처 : 리액트 스타터 키트, 동형식 로더
ready 함수는 다음과 같이 사용할 수 있습니다.
$(document).ready(function () {
React.render(<App />, document.body);
});
jQuery를 할 수 .onload★★★★
<body onload="initReact()">...</body>
index.timeout에 다음 항목을 추가하는 것은 어떨까요?
type="javascript"
다음과 같습니다.
<script type="javascript" src="public/bundle.js"> </script>
나는 성공했어! :-)
저도 같은 실수를 했어요.코드 변경 후 단순한 오타가 원인인 것으로 판명되었습니다.
document.getElementById('root')
로.
document.querySelector('root')
'#'이 없어진 것을 주목해 주세요.
document.querySelector('#root')
혹시라도 다른 사람이 이 오류를 해결하는 데 도움이 될까 봐 글을 올립니다.
네, 기본적으로 올바른 작업입니다.단, JavaScript가 동기화되어 있기 때문에 DOM이 로드되기 전에 코드를 실행하고 있는 경우는 몇 가지 방법이 있습니다.
1) DOM이 완전히 로드되었는지 확인한 후 원하는 작업을 수행합니다. 예를 들어 다음과 같이 DOMContentLoaded를 들을 수 있습니다.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2)를 2) 태그의 맨 입니다.document(예:
<html>
<head>
</head>
<body>
</body>
<script src="/bundle.js"></script>
</html>
사용 3) 사용window.onload가 로드 때
window.addEventListener("load", function() {
console.log("Everything is loaded");
});
사용 4) ★★document.onload이것은, DOM 가 준비되었을 때에 기동됩니다.
document.addEventListener("load", function() {
console.log("DOM is ready");
});
DOM이 준비되었는지 확인하는 옵션은 더 많지만 모든 경우에 DOM이 준비되었는지 확인하기 전에 스크립트를 실행하지 마십시오.
JavaScript는 DOM 요소와 함께 작동하며 사용할 수 없는 경우 null을 반환하고 전체 응용 프로그램을 손상시킬 수 있습니다.따라서 JavaScript를 실행하기 전에 항상 완벽하게 준비가 되어 있는지 확인하십시오.
반응을 렌더링하기 위해 웹 팩을 사용하고 반응에서 HtmlWebpackPlugin을 사용하는 경우 이 플러그인은 자동으로 빈 index.html을 작성하고 div 요소를 포함하지 않도록 js 파일을 삽입합니다.Html은 HtmlWebPackPlugin 문서로서 자신의 index.html을 작성하여 이 플러그인에 주소를 지정할 수 있습니다.
plugins: [
new HtmlWebpackPlugin({
title: 'dev',
template: 'dist/index.html'
})
],
그리고 이것은 나의 index.filename 파일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width">
<title>Epos report</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
제 경우, 이 에러는 새로운 클래스를 도입할 때 핫 새로고침으로 인해 발생하였습니다.프로젝트의 그 단계에서 일반 감시자를 사용하여 코드를 컴파일합니다.
ReactJs를 사용하시는 분들을 위해.게시 후 Net 및 다음 오류 발생:
하고 .jsx 파일을 합니다.Build Action로 설정되어 있다.Content. [ ]로 None공개되지 않습니다.이 SO 답변에서 이 해결책을 찾았습니다.
같은 에러 메세지가 표시되었다.이 경우 리액트를 렌더링하는 타깃 DOM 노드가 없었습니다.JS 컴포넌트가 정의되어 있습니다.HTML 타깃 노드가 적절한 "id" 또는 "name" 및 기타 HTML 속성(설계 요구에 적합)으로 올바르게 정의되어 있는지 확인합니다.
입수 시:
오류: 수집되지 않은 오류:대상 컨테이너가 DOM 요소가 아닙니다.
DOMContentLoaded 이벤트를 사용하거나 DOMContentLoaded 이벤트를<script ...></script>몸 밑바닥에 꼬리표를 달아요.
DOMContentLoaded 이벤트는 스타일시트, 이미지 및 서브프레임 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석될 때 실행됩니다.
document.addEventListener("DOMContentLoaded", function(event) {
ReactDOM.render(<App />, document.getElementById('root'));
})
기본적인 HTML CSS js를 만들고 js에서 스크립트를 렌더링하기만 하면 됩니다.
mport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
var destination = document.querySelector('#container');
ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination
); body{
text-align: center;
background-color: aqua;
padding: 50px;
border-color: aqua;
font-family: sans-serif;
}
#container{
display: flex;
justify-content: flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title> app </title>
</head>
<body>
<div id="container">
</div>
</body>
</html>사용하는 - 는 - jQuery를 합니다.window.onload와 Query (쿼리)
그래서 이건 나한테 효과가 있었어.
<script>
$(function () { <= replacing window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
...
window.ui = ui;
});
</script>
제 경우 html 파일의 모든 것이 올바르게 설정되어 있습니다(즉, 스크립트는 본문 태그의 맨 아래에 있습니다).이 문제는 컴포넌트의 정의를 컴포넌트가 ReactDOM으로 렌더링된 다른 파일로 이동함으로써 해결되었습니다.
그래서 저는 원래
import React from 'react';
import ReactDOM from 'react-dom';
class Comp extends React.Component {
// component definition
}
ReactDOM.render(
<Comp />,
document.getElementById('root')
);
컴포넌트 정의를 다른 파일로 이동하고 Import한 후 문제가 해결되었습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import Comp from './CompFile';
ReactDOM.render(
<Comp />,
document.getElementById('root')
);
제 경우, 아래의 index.js를 잘못 기재하여 수정하였습니다.
오류:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
솔루션: document.getElementById("root")
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root") // declared
);
웹 팩 포함.html 파일을 정의하는 대신 htmlPlugin으로 로드할 수 있습니다.이 경우 Webpack은 스크립트태그가 root-div 요소 위에 있는html 파일을 만듭니다.빠른 수정 방법 중 하나는 돔에 동적으로 새 div를 추가한 후 리액트 돔을 쓰는 것입니다.이것은 다음과 같이 index.js 파일에 정의되어 있는 reactDom 렌더 함수(통상은)에서 실행할 수 있습니다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>,
document.body.appendChild(document.createElement("div"))
);언급URL : https://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem
'source' 카테고리의 다른 글
| Larabel 5에서 쿼리를 실행하는 방법DB:: getQueryLog() 빈 어레이 반환 (0) | 2022.11.13 |
|---|---|
| 날짜 차이(일별 php) (0) | 2022.11.13 |
| 멀티프로세싱과 스레딩 Python (0) | 2022.11.12 |
| Android에서 HTTP GET 요청에 매개 변수를 추가하는 방법은 무엇입니까? (0) | 2022.11.12 |
| C/C++: 정수 이외의 스위치 (0) | 2022.11.12 |