有沒有辦法在 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

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

如果您想真正將它們用作一個元素，則必須從它們創建一個模塊。

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

如果您希望渲染多個組件，則需要將它們相互嵌套以保持樹狀結構。 這在他們的 多個組件的文檔頁面上進行了解釋

最終，只要頂層有一個節點，它就可以工作。

您可以只使用一個 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  
);