Wepack错误：创建一个新的组件，并在我的主要成分使用它，并且运行的WebPack相邻JSX元素必须被包裹在一个封闭的标签

Question

后，我得到的错误

相邻JSX元素必须被包裹在一个封闭标签

这里是我的代码片段：

var React = require('react'); 
var Nav = require('Nav'); 

var Main = React.createClass({ 
    render : function(){ 
    return (
     <Nav /> 
     <h2>Main Component</h2> 
    ); 
    } 
}); 

Answer 1

当有多个元素，你需要用它，所以它只有返回一个：

var Main = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Nav /> 
     <h2>Main Component</h2> 
     </div> 
    ); 
    } 
}); 

Answer 2

的错误消息是不言自明：你不能返回

(
    <Nav /> 
    <h2>Main Component</h2> 
) 

，因为他们是两个组成部分。在返回之前将它们包裹在别的东西里。

Answer 3

它应该通过一个根元素

<div> 
    <Nav/> 
    <h2>Main Component</h2> 
    </div>