Инвариантное нарушение: _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 . Хотя это правильное решение для хранения script в head и рендеринга в событии DOMContentLoaded , даже лучше разместить свой script в самом низу body и перенести корневой компонент в div прежде чем он будет выглядеть так:

 <html> <head> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html> 

И в вашем коде вызовите

 React.render(<App />, document.getElementById('root')); 

Вы всегда должны отображать вложенный div вместо body . В противном случае все виды стороннего кода (Google Font Loader, плагины браузера и т. Д.) Могут изменять узел DOM body когда React его не ожидает, и вызывают очень сложные трассировки и отладки. Подробнее об этой проблеме.

Самое приятное в том, что script внизу – это то, что он не будет блокировать рендеринг до загрузки скрипта, если вы добавите рендеринг сервера React в свой проект.

/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> в заголовке гарантирует, что браузер начнет загружать пакет JavaScript до загрузки содержимого HTML.

Источник: реактивный стартовый комплект , изоморфный стиль-загрузчик

Готовую функцию можно использовать следующим образом:

 $(document).ready(function () { React.render(<App />, document.body); }); 

Если вы не хотите использовать jQuery, вы можете использовать функцию onload :

 <body onload="initReact()">...</body> 

Просто дикая догадка, как насчет добавления в index.html следующего:

 type="javascript" 

как это:

 <script type="javascript" src="public/bundle.js"> </script> 

Для меня это сработало! 🙂

В моем случае эта ошибка была вызвана горячей перезагрузкой при введении новых классов. На этом этапе проекта используйте обычных наблюдателей для компиляции кода.

Для тех, кто использует ReactJS.Net и получает эту ошибку после публикации:

Проверьте свойства ваших файлов .jsx и убедитесь, что для параметра « Build Action установлено значение « Content . Те, которые установлены в None , не будут опубликованы. Я пришел к этому решению из этого SO-ответа .

Я столкнулся с аналогичным сообщением об ошибке. В моем случае у меня не было целевого узла DOM, который должен отображать компонент ReactJS. Убедитесь, что целевой узел HTML хорошо определен с соответствующим «id» или «name» вместе с другими атрибутами HTML (подходящими для вашего дизайна)

  • ReactJS, обновляющий один объект внутри массива состояний
  • Получение TypeError: this.props не определено в ReactJs
  • Flux + React.js - Обратный звонок в действиях хорош или плох?
  • Как принудительно перенастроить компоненты React?
  • ReactJS - Вызывается ли визуализатор в любое время, когда вызывается «setState»?
  • React native flexbox - как сделать проценты || Столбцы || Отзывчивый || Сетка и т.д.
  • Класс экспорта (по умолчанию) в ReactJS
  • Что такое «@» (символ) в декораторе Redux @connect?
  • Webpack не разрешает относительный путь URL-адреса
  • Почему React предупреждает меня о привязке компонента к объекту?
  • Как вывести текст в ReactJS без обертывания его в промежутке
  • Давайте будем гением компьютера.