Wepack错误:相邻的JSX元素必须包装在一个封闭的标签中

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

当有多个元素时，您需要包装它，所以它只返回一个：

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>