我为我的单页应用程序创建了一些静态html，例如导航，标题等。我想在这个静态html中的'content_wrapper'div内部渲染一些内容，但是我得到了这个控制台错误。
invariant.js：44未捕获错误：_registerComponent（...）：目标 容器不是DOM元素。
这是我的index.js
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, browserHistory} from "react-router";
import "./index.css";
var SideBar = React.createClass({
render() {
return (
<html>
<head>
<title>Football Prototype</title>
</head>
<div>
<header class="navbar navbar-fixed-top navbar-shadow">
<div class="navbar-branding">
<a class="navbar-brand" href="dashboard">
<b>Shire</b>Soldiers
</a>
</div>
<form class="navbar-form navbar-left navbar-search alt" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search..."
value="Search...">Search</input>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown menu-merge">
<span class="caret caret-tp hidden-xs"></span>
</li>
</ul>
</header>
<aside id="sidebar_left" class="nano nano-light affix">
<div class="sidebar-left-content nano-content">
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu</li>
<li class="active">
<a href="/dashboard">
<span class="glyphicon glyphicon-home"></span>
<span class="sidebar-title">Dashboard</span>
</a>
</li>
<li>
<a href="/fixtures">
<span class="fa fa-calendar"></span>
<span class="sidebar-title">Fixtures</span>
</a>
</li>
</ul>
</div>
</aside>
<body>
<section id="content_wrapper">
</section>
</body>
</div>
</html>
)
}
});
var destination = document.querySelector("#content_wrapper");
ReactDOM.render(
<div>
<SideBar/>
</div>,
destination
);
答案 0 :(得分：3)
我认为你是新手做出反应，你需要创建一个单独的HTML页面index.html，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Football Prototype</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div id="content_wrapper"></div>
</body>
</html>
在组件内部，只需编写要放在index.html页面中的html正文部分（包含所有逻辑，事件和api调用），定义您的组件，如下所示：
var SideBar = React.createClass({
render() {
return (
<div>
<header class="navbar navbar-fixed-top navbar-shadow">
<div class="navbar-branding">
<a class="navbar-brand" href="dashboard">
<b>Shire</b>Soldiers
</a>
</div>
<form class="navbar-form navbar-left navbar-search alt" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search..."
value="Search...">Search</input>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown menu-merge">
<span class="caret caret-tp hidden-xs"></span>
</li>
</ul>
</header>
<aside id="sidebar_left" class="nano nano-light affix">
<div class="sidebar-left-content nano-content">
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu</li>
<li class="active">
<a href="/dashboard">
<span class="glyphicon glyphicon-home"></span>
<span class="sidebar-title">Dashboard</span>
</a>
</li>
<li>
<a href="/fixtures">
<span class="fa fa-calendar"></span>
<span class="sidebar-title">Fixtures</span>
</a>
</li>
</ul>
</div>
</aside>
</div>
)
}
});
然后通过以下方式渲染：
//var destination = document.querySelector("#content_wrapper");
ReactDOM.render(
<div>
<SideBar/>
</div>,
document.querySelector("#content_wrapper");
);
它会起作用。
答案 1 :(得分：1)
您正尝试在不存在的容器中呈现组件。在调用函数之前，必须在function postt(){
var http = new XMLHttpRequest();
var y = document.getElementById("user").value;
var z = document.getElementById("pass").value;
var postdata= "username=y&password=z"; //Probably need the escape method for values here, like you did
http.open("POST", "chat.php", true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", postdata.length);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(postdata);
}
中指定的容器必须存在。所以你需要一个HTML模板。请记住，React是基于组件的，因此您应该为菜单的每个部分创建一个组件（我认为您在这里做了什么）。我建议你有以下结构：
HTML 的
ReactDOM.render菜单组件
<html>
<head>
<!--- links to css or js files here --->
</head>
<body>
<div id="root">
</div>
<!--- You can add here the link to your component/s --->
<srcipt src=path_to_your_script></script>
</body>
</html>
我刚刚复制了你的，因为它已经足够了。
渲染组件
var SideBar = React.createClass({
render() {
return (
<html>
<head>
<title>Football Prototype</title>
</head>
<div>
<header class="navbar navbar-fixed-top navbar-shadow">
<div class="navbar-branding">
<a class="navbar-brand" href="dashboard">
<b>Shire</b>Soldiers
</a>
</div>
<form class="navbar-form navbar-left navbar-search alt" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search..."
value="Search...">Search</input>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown menu-merge">
<span class="caret caret-tp hidden-xs"></span>
</li>
</ul>
</header>
<aside id="sidebar_left" class="nano nano-light affix">
<div class="sidebar-left-content nano-content">
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu</li>
<li class="active">
<a href="/dashboard">
<span class="glyphicon glyphicon-home"></span>
<span class="sidebar-title">Dashboard</span>
</a>
</li>
<li>
<a href="/fixtures">
<span class="fa fa-calendar"></span>
<span class="sidebar-title">Fixtures</span>
</a>
</li>
</ul>
</div>
</aside>
<body>
<section id="content_wrapper">
</section>
</body>
</div>
</html>
)
}
});
就像这样，当您使用顶部显示的代码打开index.html时，它将加载组件的脚本，然后将其渲染为“root”。
额外：您应该阅读有关render in React的文档，以便没有内存泄漏性能和内容。
希望这会有所帮助：）