我一直收到Adjacent JSX elements must be wrapped in an enclosing tag错误。
如何调试JSX以及错误在哪里？
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything's easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li><a href="#link-here">Contact</a></li>
<li><a href="#link-here">Twitter</a></li>
<li><a href="#link-here">Press</a></li>
<li><a href="#link-here">Support</a></li>
<li><a href="#link-here">Developers</a></li>
<li><a href="#link-here">Privacy</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
);
}
});
module.exports = Home;
答案 0 :(得分：1)
出现这种错误的原因是你有几个div彼此是兄弟姐妹。解决此问题的方法是将您在代码中的所有div包含在另一个封闭标记中（在您的情况下，似乎另一个div标记应该可以解决问题。
我添加了<div id="closingDiv">。我会试试这段代码：
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div id="closingDiv">
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything\'s easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li><a href="#link-here">Contact</a></li>
<li><a href="#link-here">Twitter</a></li>
<li><a href="#link-here">Press</a></li>
<li><a href="#link-here">Support</a></li>
<li><a href="#link-here">Developers</a></li>
<li><a href="#link-here">Privacy</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
});
module.exports = Home;