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进行转换时

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>,
  ];
}

请记住只设置密钥。

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

Answer 2

React＆gt; = 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>
]

反应＆lt; 16

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

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

如果你想将它们仅仅用作一个元素，你必须从它们创建一个模块。

Answer 3

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

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

Answer 4

在React 16之前，同一render()中的多个顶级元素要求您将所有内容包装在父元素中（通常为<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 />
    </>
  )
}

Answer 5

如果您希望渲染多个组件，则需要将它们嵌套在另一个组件中，以便维护Tree-Like结构。这在Multiple Components

的文档页面上有说明

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

您只能使用一个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  
);

Answer 6

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

Answer 7

您也可以这样做。

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

Answer 8

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

有没有办法在React.render（）函数中呈现多个React组件？

8 个答案:

React＆gt; = 16.2

React 16

反应＆lt; 16