Wepack错误：相邻的JSX元素必须包装在封闭标记[duplicate]中

Question

在创建一个新组件并在我的主组件中使用它并运行webpack后，我得到了错误

相邻的JSX元素必须包装在一个封闭的标记中

以下是我的代码片段：

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

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

Answer 1

它应该被根元素包裹

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

Answer 2

错误消息非常不言自明：您无法返回

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

因为它们是两个组成部分。在归还之前用别的东西把它们包起来。

Answer 3

当有多个元素时，需要对其进行包装，使其仅返回一个：

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