有没有办法在 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 转译

Answer 1

如果您希望渲染多个组件，您需要将它们相互嵌套以保持树状结构。这在 Multiple Components

的文档页面上进行了解释

最终只要顶层有一个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  
);

Answer 2

只需将您的多个组件包装到一个标签中。例如：

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

Answer 3

反应 >= 16.2

自16.2版本引入<<a href="https://reactjs.org/docs/fragments.html" rel="nofollow noreferrer">React.Fragment</a> />（简称<></>），可以使用条件

这是更好的方式。

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

反应 16

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

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

反应 < 16

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

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

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

Answer 4

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

Answer 5

在 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> 完全相同，但不会在 [=27= 周围留下无意义的父元素 <div> ]:

import React, { Fragment } from 'react'

...

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

它有一个 shorthand 语法，但大多数工具（例如语法荧光笔）尚不支持它：

import React from 'react'

...

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

Answer 6

你也可以这样做。

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

Answer 7

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 8

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

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

Is there a way to render multiple React components in the React.render() function?

javascript

reactjs

browserify

babeljs

反应 >= 16.2

反应 16

反应 < 16