从 React v16.0 版本开始，当您在组件内部时，您可以渲染一组组件，而无需将项目包装在额外的元素中：

render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

记住只设置键。

更新

现在从 16.2 版本您可以使用 Fragments

  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }

简短的语法

  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }

在ReactDOM.render你仍然无法渲染多个项目，因为react需要一个根。因此，您可以在 内部渲染单个组件ReactDOM.render并在内部组件中渲染一组项目。

react >= 16.2

由于引入了16.2 版（或简称），因此您可以使用条件。<React.Fragment /><></>

这是更可取的方式。

return (
    <React.Fragment>
        <h1>Page title</h1>
        <ContentComponent />
        {this.props.showFooter && (
            <footer>(c) stackoverflow</footer>
        )}
    </React.Fragment>
)

react 16

从 React 16 开始，你可以从render()方法返回一个组件列表。交易是您无法轻松调节渲染并且需要为key列表中的每个组件添加属性。

return [
    <h1 key="page-title">Page</h1>,
    <ContentComponent key="content" />,
    <footer>(c)stackoverflow</footer>
]

react < 16

在旧版本的 React 中，如果不将多个组件包装在封闭元素（标签、组件）中，则无法渲染多个组件。例如：

return (
  <article>
    <h1>title</h1>
    <meta>some meta</meta>
  </article>
)

如果您真的想将它们仅用作一个元素，则必须从它们创建一个module。

只需将您的多个组件包装成单个标签。例如：

React.render(
  <div>
    <PanelA />
    <PanelB />
  </div>, 
  document.body  
);

在 React 16 之前，同一元素中的多个顶级元素render()需要您将所有内容都包装在一个父元素中（通常是 a <div>）：

render () {
  return (
    <div>
      <Thing1 />
      <Thing2 />
    </div>
  )
}

React 16 引入了渲染顶级元素数组的能力（警告它们都必须具有唯一键）：

render () {
  return ([
    <Thing1 key='thing-1' />,
    <Thing2 key='thing-2' />
  ])
}

React 16.2 引入了<Fragment>元素，它的功能<div>与第一个示例中的完全相同，但不会<div>在 DOM 周围留下一个毫无意义的父元素：

import React, { Fragment } from 'react'

...

render () {
  return (
    <Fragment>
      <Thing1 />
      <Thing2 />
    </Fragment>
  )
}

它有一个速记语法，但大多数工具（例如，语法高亮器）尚不支持它：

import React from 'react'

...

render () {
  return (
    <>
      <Thing1 />
      <Thing2 />
    </>
  )
}

如果您希望渲染多个组件，您需要将它们相互嵌套以保持树状结构。这在他们的多组件文档页面上进行了解释

最终只要顶层有一个 Node 就可以工作。

您可以只使用一个 DOM 元素，例如 <div>

  <div>
    <PanelA />
    <PanelB />
  </div>

但是，当您创建更复杂的应用程序并拥有更多互连组件时，您可能会发现最好将子组件包装在父组件中，如下所示

import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';

var PanelHolder = React.createClass({
  render: function() {
    return (
      <div>
        <PanelA />
        <PanelB />
      </div>
    )
  }
});

然后在您的主 js 文件中，您将执行以下操作：

import React from 'react';
import PanelHolder from './panelHolder.jsx';

React.render( 
  <PanelHolder /> 
  document.body  
);