web-dev-qa-db-ja.com

React.render（）関数で複数のReactコンポーネントをレンダリングする方法はありますか？

たとえば、私ができる：

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でトランスコンパイル中

javascriptreactjsbrowserifybabeljs
38
Bryan Grace

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にはルートが必要なので、複数のアイテムをレンダリングできません。したがって、ReactDOM.render内で単一のコンポーネントをレンダリングし、内部コンポーネントでアイテムの配列をレンダリングできます。

47
David Ginanni

React> = 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>
]

反応<16

Reactの古いバージョンでは、複数のコンポーネントを囲む要素（タグ、コンポーネント）でラップしないとレンダリングできません。例えば：

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

それらを1つの要素として実際に使用する場合は、それらからモジュールを作成する必要があります。

35
Pavel Hasala

複数のコンポーネントを単一のタグにラップするだけです。例えば：

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

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>とまったく同じように機能しますが、無意味な親<div>をDOMの周りに残しません：

import React, { Fragment } from 'react'

...

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

簡単な構文がありますが、ほとんどのツール（構文ハイライターなど）ではまだサポートされていません。

import React from 'react'

...

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

複数のコンポーネントをレンダリングする場合は、ツリーのような構造を維持するために、コンポーネントを相互にネストする必要があります。これは Multiple Components のドキュメントページで説明されています

最終的には、最上位に1つのNodeがあれば機能します。

<div>などのDOM要素を1つだけ使用できます

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