首页 文章

不变违规：_registerComponent（...）：目标容器不是DOM元素

提问于
浏览 次
332

在制作了简单的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>

这是什么意思？

javascript dom reactjs

10 回答

  • 561

    在index.html文件中使用这些src dom而不是与js文件链接

    回复于
  • 0

    到执行脚本时， document 元素尚不可用，因为 script 本身位于 head 中 . 虽然它是 head 和render on DOMContentLoaded event中保持 script 的有效解决方案，但它更好 put your script at the very bottom of the body and render root component to a div before it like this:

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

    并在你的代码中，打电话

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

    You should always render to a nested div instead of body. 否则，当React不期望它时，各种第三方代码（Google Font Loader，浏览器插件，等等）都可以修改 body DOM节点，并导致非常难以跟踪和调试的奇怪错误 . Read more about this issue.

    将 script 放在底部的好处是，在脚本加载之前它不会阻止渲染，以防你将React服务器渲染添加到项目中 .

    更新：

    自React 0.14.0起不推荐使用React.render，而是使用ReactDOM.render .

    import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));
    回复于
  • 0

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

    Note ： Headers 中包含 <script async src="..."></script> 可确保浏览器在加载HTML内容之前开始下载JavaScript包 .

    来源：React Starter Kit，isomorphic-style-loader

    回复于
  • 15

    ready function可以像这样使用：

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

    如果您不想使用jQuery，可以使用 onload 函数：

    <body onload="initReact()">...</body>
    回复于
  • 51

    只是一个疯狂的猜测，如何添加到index.html以下：

    type="javascript"

    像这样：

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

    对我来说它有效！ :-)

    回复于
  • 1

    Yes, 基本上你做的很好，除了你忘了JavaScript在很多情况下是同步的，所以你在加载 DOM 之前运行代码，有几种方法可以解决这个问题：

    1）检查是否 DOM 满载，然后做你想做的任何事情，你可以听 DOMContentLoaded 例如：

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

    2）非常常见的方法是将脚本标记添加到 document 的底部（在正文标记之后）：

    <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 是否准备就绪，但简短的回答是 DO NOT 运行任何脚本，然后在每种情况下确保 DOM is ready ...

    JavaScript正在与 DOM 元素一起使用，如果它们不可用，将返回 null ，可能会破坏整个应用程序...所以始终确保您已经完全准备好运行JavaScript之前...

    回复于
  • 2

    我遇到了同样的错误 . 事实证明，在更改我的代码之后，这是由一个简单的拼写引起的：

    document.getElementById('root')

    至

    document.querySelector('root')

    请注意缺少的“＃”应该是

    document.querySelector('#root')

    只是发布，以防其他任何人解决此错误 .

    回复于
  • 1

    在我的情况下，这个错误是由热重新加载引起的，同时引入了新的类 . 在项目的该阶段，使用普通观察者来编译代码 .

    回复于
  • 2

    我遇到了类似/相同的错误消息 . 在我的例子中，我没有目标DOM节点来渲染定义的ReactJS组件 . 确保HTML目标节点使用适当的“id”或“name”以及其他HTML属性（适合您的设计需求）定义良好

    回复于
  • 9

    对于那些使用ReactJS.Net并在发布后收到此错误的人：

    检查.jsx文件的属性，并确保 Build Action 设置为 Content . 设置为 None 的那些将不会发布 . 我从this SO answer找到了这个解决方案 .

    回复于

相关问题