it-swarm.com.ru

Нарушение инварианта: _registerComponent (...): целевой контейнер не является элементом DOM

Я получаю эту ошибку после создания тривиальной React страницы примера:

Uncaught Error: Invariant Violation: _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>

Что это значит?

357
Dan Abramov

Ко времени выполнения сценария элемент document еще не доступен, поскольку сам script находится в head. Хотя это правильное решение для сохранения script в head и рендеринга в событии DOMContentLoaded , еще лучше поместить ваш script в самый конец bodyи до корневого компонента div до того, как это так:

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

и в bundle.js, позвоните:

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

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

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


Обновление: (07 октября 2015 г. | v0.14 )

React.render устарел, используйте ReactDOM.render вместо.

Пример:

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));
574
Dan Abramov

/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.

Источник: React Starter Kit , Загрузчик изоморфного стиля

52
Konstantin Tarkus

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

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

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

<body onload="initReact()">...</body>
15
nils petersohn

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

type="javascript"

как это:

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

Для меня это сработало! :-)

9
taquiles

Я столкнулся с той же ошибкой. Это оказалось вызвано простой опечаткой после изменения моего кода с:

document.getElementById('root')

в

document.querySelector('root')

Обратите внимание на пропущенное «#» Это должно было быть 

document.querySelector('#root')

Просто публикация на случай, если это поможет кому-либо еще решить эту ошибку.

4
mangakid

Да, в основном то, что вы сделали, правильно, за исключением того, что вы забыли, что во многих случаях JavaScript синхронизируется, поэтому вы запускаете код до загрузки вашегоDOM, есть несколько способов решить эту проблему:

1) Проверьте, чтоDOMполностью загружен, затем делайте все, что вы хотите, вы можете прослушать DOMContentLoaded например:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

2) Очень распространенным способом является добавление тега script в конец вашей document (после тега body):

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

3) Использование window.onload, который запускается при загрузке всей страницы (img и т.д.)

window.addEventListener("load", function() {
  console.log("Everything is loaded");
});

4) Использование document.onload, которое запускается, когдаDOMготово:

document.addEventListener("load", function() {
  console.log("DOM is ready");
});

Есть еще больше возможностей проверить, готов лиDOM, но краткий ответ - НЕ запускать какой-либо сценарий, прежде чем убедиться, что ваш DOM готов во всех случаях ...

JavaScript работает вместе с элементамиDOMи, если они недоступны, вернет null , может привести к поломке всего приложения ... поэтому всегда убедитесь, что вы полностью готовы к запуску JavaScript перед тем, как делать...

3
Alireza

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

1
Micros

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

1
anie codeskol

если вы используете webpack для рендеринга вашего реакции и используете HtmlWebpackPlugin в своем реакции, этот плагин самостоятельно создает пустой index.html и внедряет в него js-файл, поэтому он не содержит элемента div, так как HtmlWebpackPlugin docs вы можете создать свой собственный index.html и дать свой адрес этому плагину, в моем webpack.config.js

 plugins: [

        new HtmlWebpackPlugin({
            title: 'dev',
            template: 'dist/index.html'
        })
    ],

и это мой файл index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="">
    <meta name="viewport" content="width=device-width">
    <title>Epos report</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
0
ghazaleh javaheri

использовать эти src dom в файле index.html, а затем связать с файлом js

0
LOVENEET SINGH

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

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

0
Jecoms