很简单，我们可以使用父元素div来包装所有元素 或者我们可以使用高阶分量(HOC)的概念，即非常有用的 React js应用程序

render() {
  return (
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

或者另一种最好的方法是HOC，它非常简单，不太复杂 只需在你的项目中添加一个hoc.js文件，并简单地添加这些代码

const aux = (props) => props.children;
export default aux;

现在导入hoc.js文件到你想要使用的地方，而不是用div包装 元素，我们可以用hoc来包装。

import React, { Component } from 'react';
import Hoc from '../../../hoc';

    render() {
      return (
    <Hoc>
        <div>foo</div>
        <div>bar</div>
    </Hoc>
      );
    }

React元素只能返回一个元素。您必须用另一个元素标记来包装两个标记。

我还可以看到你的渲染函数没有返回任何东西。这是你的组件应该看起来的样子:

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

还要注意，你不能在返回的元素中使用if语句:

render: function() {
var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    if(this.state.submitted==false) {
        return <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

React 16将你的返回值作为一个数组，所以它应该被一个元素包装，比如div。

错误的方法

render(){
    return(
    <input type="text" value="" onChange={this.handleChange} />

     <button className="btn btn-primary" onClick=   {()=>this.addTodo(this.state.value)}>Submit</button>

    );
}

正确方法(一个div或其他元素中的所有元素)

render(){
    return(
        <div>
            <input type="text" value="" onChange={this.handleChange} />

            <button className="btn btn-primary" onClick={()=>this.addTodo(this.state.value)}>Submit</button>
        </div>
    );
}

react中有一个规则，即JSX表达式必须只有一个最外层元素。

错误的

const para = (
    <p></p>
    <p></p>
);

正确的

const para = (
    <div>
        <p></p>
        <p></p>
    </div>
);

React 16.0.0我们可以从渲染中返回多个组件作为数组。

return ([
    <Comp1 />,
    <Comp2 />
]);

React 16.2.0 >我们可以在一个Fragment标签中返回多个渲染组件。片段

return (
<React.Fragment>
    <Comp1 />
    <Comp2 />
</React.Fragment>);

React 16.2.0 >你可以使用这个简写语法。(一些旧的工具版本不支持它，所以你可能想要显式地写<Fragment>，直到工具赶上。)

return (
<>
    <Comp1 />
    <Comp2 />
</>)

现在回答这个问题已经晚了，但我认为它会增加解释。

这是因为在代码的任何地方都同时返回两个元素。

e.g

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

它应该被包装在父元素中。如

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

更详细说明

转换下面的jsx代码

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

到这个

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

但如果你这样做

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
        <div>Hi</div>
    );
  }
}

this被转换为this(只是为了说明，实际上你会得到错误:相邻的JSX元素必须被封装在一个封闭的标记中)

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

在上面的代码中，您可以看到您试图从一个方法调用返回两次，这显然是错误的。

编辑- React 16和自己的最新变化:

如果你不想添加额外的div来环绕，并且想要返回多个子组件，你可以使用React.Fragments。

反应。Fragments (<React.Fragments>)稍微快一点，占用内存更少(不需要创建额外的DOM节点，DOM树不那么杂乱)。

例如(在React 16.2.0中)

render() {
  return (
    <>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </>
  );
}

or

render() {
  return (
    <React.Fragments>
       React fragments.
      <h2>A heading</h2>
      More React fragments.
      <h2>Another heading</h2>
      Even more React fragments.
    </React.Fragments>
  );
}

or

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}