Ten błąd pojawia się po utworzeniu trywialnej przykładowej strony React:
Nieprzechwycony błąd: Niezmienne naruszenie: _registerComponent (...): Kontener docelowy nie jest elementem DOM.
Oto mój kod:
/** @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>
Co to znaczy?
javascript
dom
reactjs
Dan Abramov
źródło
źródło
Odpowiedzi:
Do czasu wykonania skryptu
document
element nie jest jeszcze dostępny, ponieważscript
sam jest w plikuhead
. O ile jest to ważne rozwiązanie, aby utrzymaćscript
sięhead
i render naDOMContentLoaded
imprezy , to nawet lepiej, aby umieścić swojescript
u samego dołubody
i renderowanie składnik głównego dodiv
przed nim tak:oraz w
bundle.js
:Zawsze powinieneś renderować do zagnieżdżonego
div
zamiastbody
. W przeciwnym razie wszelkiego rodzaju kody innych firm (moduł ładujący czcionki Google, wtyczki przeglądarki itp.) Mogą modyfikowaćbody
węzeł DOM, gdy React nie oczekuje go, i powodować dziwne błędy, które są bardzo trudne do śledzenia i debugowania. Przeczytaj więcej o tym problemie.Zaletą umieszczania
script
na dole jest to, że nie blokuje renderowania do momentu załadowania skryptu w przypadku dodania renderowania serwera React do projektu.Aktualizacja: (07 października 2015 r. | v0.14 )
Przykład:
źródło
/index.html
/app.js
(IE9 +)
Uwaga : Posiadanie
<script async src="..."></script>
nagłówka gwarantuje, że przeglądarka rozpocznie pobieranie pakietu JavaScript wcześniej załadowaniem treści HTML.Źródło: React Starter Kit , moduł ładujący w stylu izomorficznym
źródło
ReactDOM.render
zamiastReact.render
.defer
może być lepszym rozwiązaniemfunkcja gotowy może być stosowany tak:
Jeśli nie chcesz używać jQuery, możesz użyć
onload
funkcji:źródło
DOMContentLoaded
byłoby bardziej odpowiednie nawet do obsługi niżload
(tego używa jQuery ). Możesz to również zrobić w JSwindow.addEventListener
, bez potrzeby korzystania z wbudowanych procedur obsługi i funkcji globalnych.$(document).ready
Rozwiązać problem. No i tak, użyjrender
zamiastrenderComponent
.zwykłe zgadywanie, co powiesz na dodanie do index.html:
lubię to:
Dla mnie to zadziałało! :-)
źródło
type="text/javascript"
działało poprawnie.Wystąpił ten sam błąd. Okazało się, że jest to spowodowane zwykłą literówką po zmianie mojego kodu z:
do
Zauważ brakujące „#” Powinno być
Tylko publikowanie na wypadek, gdyby pomogło to komuś rozwiązać ten błąd.
źródło
Tak, w zasadzie to, co zrobiłeś, jest słuszne, ale zapominasz, że JavaScript jest synchronizowany w wielu przypadkach, więc jeśli uruchamiasz kod przed załadowaniem DOM , istnieje kilka sposobów na rozwiązanie tego:
1) Sprawdź, czy DOM jest w pełni załadowany, a następnie rób, co chcesz, możesz odsłuchać DOMContentLoaded, na przykład:
2) Bardzo popularnym sposobem jest dodanie znacznika skryptu do dolnej części
document
(po znaczniku body):3) Używanie
window.onload
, które jest uruchamiane po załadowaniu całej strony (img itp.)4) Używanie
document.onload
, które jest uruchamiane, gdy DOM jest gotowy:Jest jeszcze więcej opcji, aby sprawdzić, czy DOM jest gotowy, ale krótka odpowiedź brzmi: NIE uruchamiaj żadnego skryptu, zanim nie upewnisz się, że DOM jest gotowy w każdym przypadku ...
JavaScript działa razem z elementami DOM i jeśli nie są one dostępne, zwróci null , może uszkodzić całą aplikację ... więc zawsze upewnij się, że jesteś w pełni gotowy do uruchomienia JavaScript zanim to zrobisz ...
źródło
Jeśli używasz webpacka do renderowania twojego reagowania i używasz HtmlWebpackPlugin w swojej reakcji, ta wtyczka sama zbuduje swój pusty index.html i wstrzykuje do niego plik js, więc nie zawiera elementu div, ponieważ HtmlWebpackPlugin docs możesz zbudować własny indeks. HTML i podaj adres tej wtyczki w moim pliku webpack.config.js
i to jest mój plik index.html
źródło
HtmlWebpackPlugin
wtyczki tutaj, jeśli jest używana do odwoływania się do statycznego pliku HTML?W moim przypadku ten błąd został spowodowany przez ponowne ładowanie na gorąco podczas wprowadzania nowych klas. Na tym etapie projektu skompiluj kod za pomocą zwykłych obserwatorów.
źródło
Dla osób używających ReactJS.Net i otrzymujących ten błąd po opublikowaniu:
Sprawdź właściwości plików .jsx i upewnij się, że
Build Action
jest ustawiony naContent
. Te ustawione naNone
nie zostaną opublikowane. Natrafiłem na to rozwiązanie z tej SO odpowiedzi .źródło
Natrafiłem na podobny / taki sam komunikat o błędzie. W moim przypadku nie miałem docelowego węzła DOM, który ma renderować zdefiniowany komponent ReactJS. Upewnij się, że docelowy węzeł HTML jest dobrze zdefiniowany za pomocą odpowiedniego „id” lub „name”, a także innych atrybutów HTML (odpowiednich do potrzeb projektu)
źródło
to proste, po prostu utwórz podstawowy plik CSS js HTML i wyrenderuj skrypt z pliku js
źródło
Kiedy dostaniesz:
Błąd: Nieprzechwycony błąd: Kontener docelowy nie jest elementem DOM.
Możesz użyć zdarzenia DOMContentLoaded lub przenieść
<script ...></script>
tag w dolnej części ciała.źródło