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>