Я получаю эту ошибку после создания тривиального примера страницы React:
Uncaught Ошибка: Инвариантное нарушение: _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>
Что это значит?
javascript
dom
reactjs
Дан Абрамов
источник
источник
Ответы:
К моменту выполнения скрипта
document
элемент еще не доступен, посколькуscript
сам находится вhead
. Несмотря на то , что это правильное решение , чтобы держатьscript
вhead
и оказывать наDOMContentLoaded
события , это даже лучше положить вашиscript
на самом днеbody
и визуализации корневого компонента кdiv
перед ним , как это:и в
bundle.js
, позвоните:Вы должны всегда делать рендеринг для вложенных,
div
а неbody
. В противном случае все виды стороннего кода (Google Font Loader, плагины для браузера и т. Д.) Могут изменитьbody
узел DOM, когда React его не ожидает, и вызвать странные ошибки, которые очень сложно отследить и отладить. Узнайте больше об этой проблеме.Приятно отметить,
script
что он не будет блокировать рендеринг до загрузки скрипта, если вы добавите рендеринг сервера React в свой проект.Обновление: (07 октября 2015 | v0.14 )
Пример:
источник
/index.html
/app.js
(IE9 +)
Примечание . Наличие
<script async src="..."></script>
в заголовке гарантирует, что браузер начнет загружать пакет JavaScript до загрузки содержимого HTML.Источник: React Starter Kit , загрузчик изоморфного стиля
источник
ReactDOM.render
вместоReact.render
.defer
может быть, лучший вариантготовая функция может быть использована следующим образом:
Если вы не хотите использовать jQuery, вы можете использовать
onload
функцию:источник
DOMContentLoaded
было бы более подходящим даже для обработки, чемload
(это то, что использует jQuery ). Вы также можете сделать это в JSwindow.addEventListener
без необходимости встроенных обработчиков и глобальных функций.$(document).ready
решил проблему. Ох и да, используйтеrender
вместоrenderComponent
.просто дикая догадка, как насчет добавления в index.html следующее:
нравится:
Для меня это сработало! :-)
источник
type="text/javascript"
работал должным образом.Я столкнулся с той же ошибкой. Это оказалось вызвано простой опечаткой после изменения моего кода с:
в
Обратите внимание на пропущенный '#' Это должно было быть
Просто публикация на случай, если это поможет кому-либо еще решить эту ошибку.
источник
Да, в основном то , что вы сделали, правильно, за исключением того, что вы забыли, что JavaScript во многих случаях синхронизирован, поэтому вы запускаете код до загрузки DOM , и есть несколько способов решить эту проблему:
1) Проверьте, полностью ли загружен DOM , затем делайте что хотите, вы можете прослушать DOMContentLoaded, например:
2) Очень распространенным способом является добавление тега script внизу вашего
document
(после тега body):3) Использование
window.onload
, которое запускается при загрузке всей страницы (img и т. Д.)4) Использование
document.onload
, которое запускается, когда DOM готов:Есть еще больше опций, чтобы проверить , готов ли DOM , но краткий ответ - НЕ запускайте сценарий, пока вы не убедитесь, что ваш DOM готов во всех случаях ...
JavaScript работает вместе с элементами DOM и, если они недоступны, вернет значение null , может привести к поломке всего приложения ... поэтому всегда убедитесь, что вы полностью готовы запустить JavaScript, прежде чем делать это ...
источник
Если вы используете webpack для рендеринга вашего реакции и используете HtmlWebpackPlugin в своем реакции, этот плагин создает свой пустой index.html сам по себе и внедряет в него файл js, поэтому он не содержит элемента div, так как HtmlWebpackPlugin docs вы можете создать свой собственный индекс. HTML и дать свой адрес этому плагину, в моем webpack.config.js
и это мой файл index.html
источник
HtmlWebpackPlugin
плагин здесь, если он используется для ссылки на статический файл HTML?В моем случае эта ошибка была вызвана горячей перезагрузкой при введении новых классов. На этом этапе проекта используйте обычные наблюдатели для компиляции кода.
источник
Для тех, кто использует ReactJS.Net и получает эту ошибку после публикации:
Проверьте свойства ваших файлов .jsx и убедитесь, что
Build Action
установлено значениеContent
. Те, которые установленыNone
, не будут опубликованы. Я пришел к этому решению из этого SO ответа .источник
Я столкнулся с аналогичным / таким же сообщением об ошибке. В моем случае у меня не было целевого DOM-узла, который должен визуализировать определенный компонент ReactJS. Убедитесь, что целевой узел HTML правильно определен с соответствующими «id» или «name», наряду с другими атрибутами HTML (подходит для вашей потребности в дизайне)
источник
это просто сделать простой HTML CSS js и отрисовать скрипт из js
источник
Когда вы получили:
Ошибка: Uncaught Ошибка: целевой контейнер не является элементом DOM.
Вы можете использовать событие DOMContentLoaded или переместить свой
<script ...></script>
тег внизу вашего тела.источник