Eu recebo esse erro após uma página de exemplo trivial de React:
Erro não capturado: Violação invariável: _registerComponent (...): O contêiner de destino não é um elemento DOM.
Aqui está o meu código:
/** @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>
O que isto significa?
javascript
dom
reactjs
Dan Abramov
fonte
fonte
Respostas:
No momento em que o script é executado, o
document
elemento ainda não está disponível, porquescript
está no diretóriohead
. Embora seja uma solução válida para manterscript
emhead
e rende noDOMContentLoaded
evento , é ainda melhor para colocar o seuscript
na parte inferior dobody
e tornar componente raiz para umdiv
antes assim:e no
bundle.js
, ligue para:Você deve sempre renderizar para um aninhado em
div
vez debody
.Caso contrário, todos os tipos de código de terceiros (Google Font Loader, plug-ins de navegador, o que for) podem modificar obody
nó DOM quando o React não o espera e causar erros estranhos que são muito difíceis de rastrear e depurar.Leia mais sobre esse problema.O bom de colocar
script
na parte inferior é que ele não bloqueará a renderização até o carregamento do script, caso você adicione a renderização do servidor React ao seu projeto.Atualização: (07 de outubro de 2015 | v0.14 )
Exemplo:
fonte
/index.html
/app.js
(IE9 +)
Nota : Ter
<script async src="..."></script>
no cabeçalho garante que o navegador comece a baixar o pacote JavaScript antes de conteúdo HTML seja carregado.Fonte: React Starter Kit , carregador de estilo isomórfico
fonte
ReactDOM.render
invés deReact.render
.defer
pode ser uma opção melhora função ready pode ser usada assim:
Se você não quiser usar o jQuery, poderá usar a
onload
função:fonte
DOMContentLoaded
que seria mais apropriado manipular do queload
(isso é o que o jQuery usa ). Você também pode fazer isso em JS comwindow.addEventListener
, sem necessidade de manipuladores embutidos e funções globais.$(document).ready
resolveu o problema. Ah e sim, use emrender
vez derenderComponent
.apenas um palpite, que tal adicionar ao index.html o seguinte:
como isso:
Para mim funcionou! :-)
fonte
type="text/javascript"
funcionou corretamente.Corri para o mesmo erro. Acabou sendo causado por um erro de digitação simples depois de alterar meu código de:
para
Observe o '#' ausente. Deveria ter sido
Apenas postando caso ajude alguém a resolver esse erro.
fonte
Sim, basicamente o que você fez é certo, exceto que você esquece que o JavaScript é sincronizado em muitos casos, então você executa o código antes do seu DOM carregamento do , existem algumas maneiras de resolver isso:
1) Verifique se o DOM está totalmente carregado e faça o que quiser. Você pode ouvir DOMContentLoaded, por exemplo:
2) A maneira mais comum é adicionar a tag de script na parte inferior do seu
document
(após a tag body):3) Utilização
window.onload
, que é acionada quando a página inteira é carregada (img, etc)4) Using
document.onload
, que é acionado quando o DOM está pronto:Existem ainda mais opções para verificar se o DOM está pronto, mas a resposta curta é NÃO executar nenhum script antes de verificar se o DOM está pronto em todos os casos ...
O JavaScript está funcionando junto com os elementos DOM e, se não estiverem disponíveis, retornará nulo , poderá interromper o aplicativo inteiro ... portanto, verifique sempre se você está totalmente pronto para executar o JavaScript antes de executar ...
fonte
Se você usa o webpack para renderizar o seu react e usa o HtmlWebpackPlugin no seu react, esse plug-in cria seu próprio index.html em branco e injeta o arquivo js nele, para que ele não contenha elemento div, como o HtmlWebpackPlugin documenta, você pode criar seu próprio índice. html e forneça o endereço desse plug-in no meu webpack.config.js
e este é o meu arquivo index.html
fonte
HtmlWebpackPlugin
plugin aqui se ele é usado para fazer referência a arquivos HTML estáticos?No meu caso, esse erro foi causado pelo recarregamento a quente, ao introduzir novas classes. Nesse estágio do projeto, use observadores normais para compilar seu código.
fonte
Para aqueles que usam o ReactJS.Net e obtêm esse erro após uma publicação:
Verifique as propriedades dos seus arquivos .jsx e verifique se
Build Action
está definido comoContent
. Aqueles definidos comoNone
não serão publicados. Encontrei esta solução com esta resposta SO .fonte
Corri para a mesma / mesma mensagem de erro. No meu caso, eu não tinha o nó DOM de destino que deve renderizar o componente ReactJS. Verifique se o nó de destino HTML está bem definido com o "id" ou "nome" apropriado, juntamente com outros atributos HTML (adequados para sua necessidade de design)
fonte
é fácil, basta criar js CSS HTML básicos e renderizar o script de js
fonte
Quando você conseguiu:
Erro: Erro não capturado: o contêiner de destino não é um elemento DOM.
Você pode usar o evento DOMContentLoaded ou mover sua
<script ...></script>
tag na parte inferior do seu corpo.fonte