2015-06-27 58 views
0

我不断收到Adjacent JSX elements must be wrapped in an enclosing tag错误。试图调试相邻的JSX元素错误

如何调试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 &amp; 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; 

回答

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 &amp; 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;