有没有办法在 React.render() 函数中渲染多个 React 组件？

Question

例如我可以这样做：

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

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

React 会在哪里渲染：

 body
   PanelA
   PanelB

目前我收到错误：

 Adjacent JSX elements must be wrapped in an enclosing tag

在使用 browserify 和 babelify 转译时

原文由 Bryan Grace 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 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 中呈现单个组件，并在内部组件中呈现项目数组。

原文由 David Ginanni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

反应 >= 16.2

由于版本 16.2 <React.Fragment /> （或简称 <></> ）被引入，所以你可以使用条件。

这是更可取的方式。

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

反应 16

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

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

反应 < 16

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

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

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

原文由 Pavel Hasala 发布，翻译遵循 CC BY-SA 4.0 许可协议