Solución:
Desde el lanzamiento de React v16.0, puede renderizar una matriz de componentes sin envolver elementos en un elemento adicional cuando está dentro de un componente:
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>,
];
}
Recuerde solo configurar las claves.
ACTUALIZAR
Ahora desde la versión 16.2 puedes usar los Fragmentos
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
Sintaxis corta
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
En el ReactDOM.render todavía no puede renderizar varios elementos porque react necesita una raíz. Para que pueda renderizar un solo componente dentro del ReactDOM.render y renderizar una matriz de elementos en el componente interno.
Reaccionar> = 16,2
Desde la versión 16.2 <React.Fragment /> (o <></> para abreviar) se introdujo, por lo que puede utilizar condiciones.
Esta es la forma preferible.
return (
<React.Fragment>
<h1>Page title</h1>
<ContentComponent />
{this.props.showFooter && (
<footer>(c) stackoverflow</footer>
)}
</React.Fragment>
)
Reaccionar 16
Desde React 16, puede regresar de la render() método una lista de componentes. El cambio es que no puede condicionar fácilmente el renderizado y necesita agregar key atributo a cada componente de la lista.
return [
<h1 key="page-title">Page</h1>,
<ContentComponent key="content" />,
<footer>(c)stackoverflow</footer>
]
Reaccionar <16
En versiones anteriores de React, no puede renderizar varios componentes sin envolverlos en un elemento adjunto (etiqueta, componente). p.ej:
return (
<article>
<h1>title</h1>
<meta>some meta</meta>
</article>
)
Si desea utilizarlos realmente como un solo elemento, debe crear un módulo a partir de ellos.
Simplemente envuelva sus múltiples componentes en una sola etiqueta. Por ejemplo:
React.render(
<div>
<PanelA />
<PanelB />
</div>,
document.body
);