从React v16.0版本开始，当您在组件内部时，可以呈现组件数组，而无需在额外的元素中 Package 项目：

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版本开始，您可以使用片段

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](https://reactjs.org/docs/fragments.html) />（或简称<></>），所以可以使用条件。
这是更可取的方式。

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

第十六章React
从React16开始，你可以从render()方法返回一个组件列表，但你不能很容易地调整渲染，需要为列表中的每个组件添加key属性。

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

React〈16

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

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

如果你真的想把它们作为一个元素来使用，你必须从它们中创建一个模块。

只需将多个组件 Package 到一个标记中即可。例如：

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

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

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

React 16引入了呈现顶级元素数组的功能（带有一个警告，提示它们必须都有唯一的键）：

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

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

import React, { Fragment } from 'react'

...

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

有一种简化的语法，但大多数工具（例如语法高亮器）还不支持它：

import React from 'react'

...

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

如果你想呈现多个组件，你需要将它们嵌套在一起，以保持树状结构。
最终，只要顶层有一个节点，它就可以工作。
您可以只使用一个DOM元素，例如<div>

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

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

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  
);

this.propsTextBox.value = this._context.parameters.textBoxProperty.raw || "";
var elements = new Array<React.SFCElement<any>>();
elements.push(React.createElement(
                TextField, 
                this.propsTextBox
            ));
elements.push(React.createElement(
    Label, 
    this.propsLabel
));

ReactDOM.render(
    elements,  
    this._container
);

你也可以这样做。

const list = [item1, item2]
const elements = (
    <div>
      {list.map(element => element)}
    </div>
  );
ReactDOM.render(elements, document.body);

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