Инвариантное нарушение: _registerComponent (…): контейнер-объект не является элементом DOM
Я получаю эту ошибку после создания тривиальной страницы примера React:
Ошибка при открытии: Инвариантное нарушение: _registerComponent (…): Контейнер цели не является элементом DOM.
Вот мой код:
- Прокручиваемый div, чтобы придерживаться снизу, когда внешний div изменяется в размере
- Как передать несколько параметров обработчику onChange ввода
- Событие OnChange с использованием React JS для раскрывающегося списка
- Как я могу анимировать компонент response.js onclick и обнаруживать конец анимации
- Зачем нужен браузер.min.js в реакциях?
/** @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>
Что это значит?
- Как получить значение поля пароля в материале реакции-ui
- Почему getInitialState не вызывается для моего класса React?
- ReactJS - Как изменить стиль и класс реагирующего компонента?
- Как обрабатывать вложенные вызовы api в потоке
- OnChange callback не срабатывает в компоненте React
- Кнопка paypal для response.js
- This.key в React.js 0.12
- SetState vs replaceState в React.js
К моменту выполнения сценария элемент 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 (подходящими для вашего дизайна)