web-dev-qa-db-fra.com

Est-il possible de rendre plusieurs React composants dans la fonction React.render ()?

Par exemple pourrais-je faire:

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

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

où React rendrait:

body
   PanelA
   PanelB

Actuellement, je reçois l'erreur:

Adjacent JSX elements must be wrapped in an enclosing tag

en transpirant avec browserify et babelify

javascriptreactjsbrowserifybabeljs
38
Bryan Grace

Depuis la version React v16.0), vous pouvez générer un tableau de composants sans encapsuler les éléments dans un élément supplémentaire lorsque vous vous trouvez dans un composant:

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

N'oubliez que de définir les clés.

Dans le ReactDOM.render vous ne pouvez toujours pas restituer plusieurs éléments, car react nécessite une racine. Ainsi, vous pouvez rendre un seul composant à l'intérieur de la ReactDOM.render et restituer un tableau d'éléments dans le composant interne.

47
David Ginanni

Réagir> = 16.2

Depuis la version 16.2, <React.Fragment /> (Ou <></> En abrégé) a été introduit, vous pouvez donc utiliser des conditions. C'est la voie préférable.

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

Réagir 16

Depuis React 16, vous pouvez renvoyer une liste de composants à partir de la méthode render()]. Le métier de ce produit ne permet pas de conditionner facilement le rendu et vous devez ajouter key attribut à chaque composant de la liste.

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

Réagir <16

Dans les anciennes versions de React, vous ne pouvez pas restituer plusieurs composants sans les envelopper dans un élément englobant (balise, composant). par exemple:

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

Si vous voulez vraiment les utiliser comme un seul élément, vous devez créer un module à partir d’eux.

35
Pavel Hasala

Emballez simplement vos composants multiples dans une seule balise. Par exemple:

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

Avant React 16, plusieurs éléments de niveau supérieur dans le même render() exigent de tout envelopper dans un élément parent (généralement un <div>):

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

React 16 a introduit la possibilité de restituer un tableau d'éléments de premier niveau (avec un avertissement indiquant qu'ils doivent tous avoir des clés uniques):

render () {
  return ([
    <Thing1 key='thing-1' />,
    <Thing2 key='thing-2' />
  ])
}

React 16.2 a introduit l’élément <Fragment>, Qui fonctionne exactement comme le <div> Dans le premier exemple mais ne laisse pas de parent inutile <div> Traîner dans le DOM:

import React, { Fragment } from 'react'

...

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

Il existe une syntaxe abrégée pour cela, mais il n'est pas encore supporté par la plupart des outils (par exemple, les surligneurs de syntaxe):

import React from 'react'

...

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

Si vous souhaitez rendre plusieurs composants en sortie, vous devez les imbriquer les uns dans les autres afin de conserver la structure arborescente. Ceci est expliqué sur leur page de documentation pour Plusieurs composants

En fin de compte, tant qu’il en existe un Node au niveau supérieur, cela peut fonctionner.

Vous pouvez utiliser un seul élément DOM tel qu'un <div>

  <div>
    <PanelA />
    <PanelB />
  </div>

Cependant, à mesure que vous créez des applications plus complexes et que vous avez plus de composants interconnectés, il peut être préférable d’envelopper des composants enfants dans un parent, comme ceci.

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

Et puis dans votre fichier js principal, vous feriez:

import React from 'react';
import PanelHolder from './panelHolder.jsx';

React.render( 
  <PanelHolder /> 
  document.body  
);
7
JonE