不变违规:_registerComponent(…):目标容器不是DOM元素

2020/09/29 05:01 · javascript ·  · 0评论

在制作平凡的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>

这是什么意思?

在执行脚本时,documentelement尚不可用,因为script其本身位于中head虽然这是一个有效的解决方案,以保持scripthead渲染的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否则,body当React不期望时,各种第三方代码(Google字体加载器,浏览器插件,等等)都可以修改DOM节点,并导致难以跟踪和调试的奇怪错误。阅读有关此问题的更多信息。

放在script底部的好处是,在将脚本添加到项目中之前,脚本加载之前它不会阻止渲染。


更新:(2015年10月7日| v0.14

React.render已弃用,请ReactDOM.render
改用。

例:

import ReactDOM from 'react-dom';

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

/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>标头中的内容可确保浏览器加载HTML内容之前将开始下载JavaScript软件包

来源:React入门套件同构样式加载器

准备功能,可以使用这样的:

$(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>

对我来说,它奏效了!:-)

我遇到了同样的错误。原来是将我的代码从以下位置更改后,由一个简单的错字引起的:

document.getElementById('root')

document.querySelector('root')

注意缺少的“#”应该是

document.querySelector('#root')

只是发布以防其他人解决此错误。

是的,基本上您所做的是正确的,除了您忘记了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 ...

如果您使用webpack来呈现您的react并在react中使用HtmlWebpackPlugin,则此插件将自行构建其空白index.html并在其中注入js文件,因此它不包含div元素,作为HtmlWebpackPlugin文档,您可以构建自己的索引。 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>

以我为例,此错误是由热重载引起的,同时引入了新类。在项目的那个阶段,请使用普通的观察者来编译您的代码。

对于使用ReactJS.Net并在发布后出现此错误的用户:

检查.jsx文件的属性,并确保Build Action将其设置为Content设置为的那些None将不会发布。我从这个SO答案中得到了这个解决方案

我遇到类似/相同的错误消息。就我而言,我没有用于定义ReactJS组件的目标DOM节点。确保使用适当的“ id”或“ name”以及其他HTML属性(适合您的设计需求)很好地定义了HTML目标节点。

只需制作基本的HTML CSS js并从js渲染脚本就很容易

mport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var destination = document.querySelector('#container');

   ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination


	); 
body{

    text-align: center;
    background-color: aqua;
  padding: 50px;
  border-color: aqua;
  font-family: sans-serif;
}
#container{
  display: flex;
  justify-content: flex;

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
   
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />   
    <title> app  </title>
  </head>
  <body>
 

    <div id="container">
      
    </div>

  </body>
</html>

当你得到:

错误:未捕获错误:目标容器不是DOM元素。

您可以使用DOMContentLoaded事件,也可以将<script ...></script>标签移动到正文的底部。

DOMContentLoaded事件触发时,最初的HTML文档已被完全加载和分析,而无需等待样式表,图片和完成加载子。

document.addEventListener("DOMContentLoaded", function(event) {
  ReactDOM.render(<App />, document.getElementById('root'));
})
本文地址:http://javascript.askforanswer.com/bubianweigui_registercomponentmubiaorongqibushidomyuansu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!