未捕获的不变违规：_registerComponent(...)：目标容器不是 DOM 元素
Posted
技术标签:
【中文标题】未捕获的不变违规：_registerComponent(...)：目标容器不是 DOM 元素【英文标题】：Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element 【发布时间】：2016-08-01 12:14:45 【问题描述】：我正在使用 Django 和 React。
我想显示这个 html 文件：
% load staticfiles %
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link href="%static "css/rankingStyle.css"%" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<title>Some title</title>
</head>
<body>
<div id="app" />
<script src="%static "public/bundle.js"%" type="text/javascript"></script>
</body>
</html>
此文件引用js 文件：<script src="%static "public/bundle.js"%" type="text/javascript">。
js 文件已经从这个 React 文件中获得：
import React from 'react';
import render from 'react-dom';
import Criteria from './Criteria.jsx';
import Button from 'react-bootstrap';
var App = React.createClass(
getInitialState: function()
return showRest: false;
,
toggleShowRest: function()
this.setState(showRest: !this.state.showRest);
,
render: function()
return (
<div className="container">
<div className="text-center">
<h1> Title</h1>
<button onClick=this.toggleShowRest type="button" className="btn btn-primary btn-circle btn-xl">Go</button>
</div>
this.state.showRest
?
<Criteria />
:
null
</div>
);
);
React.render(<App url="/api/comments"/>, document.getElementById('app'));
在浏览器中，我收到此错误：
bundle.js:593 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
593行之前的区域有这样的内容：
var DOMChildrenOperations =
dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
到目前为止，我看了这里：Invariant Violation: _registerComponent(...): Target container is not a DOM element 并尝试了所有答案。
但是他们没有工作。我认为这个问题是由 Django 特定的东西引起的。
【问题讨论】：
请使用ReactDOM.render() 方法调用发布该行。顺便说一句，div 不是自闭合元素，您应该使用<div id="app"></div>。这可能会导致问题。
没有ReactDOM.render() 方法调用。我正在使用React.render()。
这是一回事，取决于 React 版本。你要分享吗？你试过关闭 div 吗？
是的，我尝试关闭它，但我遇到了同样的问题。我已经与React.render()分享了代码。
【参考方案1】：
你应该在dome node div id是app之后导入build js
例如：
【讨论】：
以上是关于未捕获的不变违规：_registerComponent(...)：目标容器不是 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章
测试套件无法运行。不变违规：_registerComponent(...)：目标容器不是 DOM 元素