Comment éviter un wrapping supplémentaire <div> dans React?

114

Aujourd'hui, j'ai commencé à apprendre ReactJS et après une heure confronté au problème .. Je veux insérer un composant qui a deux lignes à l'intérieur d'un div sur la page. Un exemple simplifié de ce que je fais ci-dessous.

J'ai un html:

<html>
..
  <div id="component-placeholder"></div>
..
</html>

Fonction de rendu comme ceci:

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

Et ci-dessous, j'appelle render:

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

Le HTML généré ressemble à ceci:

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

Le problème que je ne suis pas très content que React m'oblige à tout envelopper dans un div "DeadSimpleComponent". Quelle est la meilleure solution de contournement simple pour cela, sans manipulations DOM explicites?

MISE À JOUR 28/07/2017: Les responsables de React ont ajouté cette possibilité dans React 16 Beta 1

Depuis React 16.2 , vous pouvez faire ceci:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

javascript reactjs

— Kirill Reznikov
source

4

pratique de nommage parfaite ;-)

— Kirill Reznikov

Puis-je voir votre fichier HTML? J'ai mal lu votre question. J'ai peut-être une solution de contournement.

— Louis93

Smth comme ceci: jsfiddle.net/qawumm3v

— Kirill Reznikov

Vous avez un problème avec un composant ayant un seul élément? Vraiment?

— Dominic

Que voulez-vous dire? J'essaye juste React, ça ne devrait pas être très compliqué. Mais la limitation semble ennuyeuse.

— Kirill Reznikov

142

Cette exigence a été supprimée dans la version React (16.0)] 1 , vous pouvez donc désormais éviter ce wrapper.

Vous pouvez utiliser React.Fragment pour afficher une liste d'éléments sans créer de nœud parent, exemple officiel:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Plus ici: Fragments

— Luger
source

1

Bonne nouvelle DmitryUlyanets. Y a-t-il une date de sortie prévue?

— Jonas Carlbaum

Il est publié depuis le 26 septembre 2017, voir reactjs.org/blog/2017/09/26/react-v16.0.html

— Tom

56

Mise à jour 05/12/2017: React v16.2.0 prend désormais entièrement en charge le rendu des fragments avec une prise en charge améliorée du retour de plusieurs enfants à partir d'une méthode de rendu de composants sans spécifier de clés dans les enfants:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Si vous utilisez une version de React antérieure à la v16.2.0, il est également possible d'utiliser à la <React.Fragment>...</React.Fragment>place:

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Original:

React v16.0 a introduit le retour d'un tableau d'éléments dans la méthode de rendu sans l'envelopper dans un div: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Pour le moment, une clé est requise pour chaque élément afin d'éviter l'avertissement de clé, mais cela pourrait être modifié dans les versions futures:

À l'avenir, nous ajouterons probablement une syntaxe de fragment spéciale à JSX qui ne nécessite pas de clés.

— À M
source

La nouvelle syntaxe abrégée de <> </> est excellente. Cependant, j'ai encore beaucoup de sentiments mitigés à ce sujet.

— Thulani Chivandikwa

@ThulaniChivandikwa Pourriez-vous exprimer vos doutes sur la syntaxe sténographique?

— Tom le

1

Je pense qu'il s'agit davantage du concept d'une balise vide étant étrange dans le JSX et pas très intuitive à moins que vous ne sachiez exactement ce qu'elle fait.

— Thulani Chivandikwa

7

Vous pouvez utiliser:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

Pour plus de détails, reportez-vous à cette documentation .

— Rolando Cintron
source

3

Utilisez [] au lieu de () pour encapsuler le retour entier.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

— Michael Cuneo
source

2

J'ai créé un composant pour envelopper les composants enfants sans DIV. Cela s'appelle un wrapper d'ombre: https://www.npmjs.com/package/react-shadow-wrapper

— Matt Landers
source

J'ai publié un problème sur votre colis, pouvez-vous jeter un œil? Merci

— Antoni4

1

Ceci est toujours nécessaire , MAIS React assurez-vous maintenant de créer des éléments sans créer d'élément DOM supplémentaire.

L'emballage supplémentaire nécessaire (normalement avec un parent div) car la createElementméthode Reacts nécessite un typeparamètre qui est either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Mais c'était avant l'introduction de React Fragment.

Référez - vous à ce NOUVEAU doc api pour createElement

React.createElement : crée et renvoie un nouvel élément React du type donné. L'argument type peut être une chaîne de nom de balise (telle que «div» ou «span»), un type de composant React (une classe ou une fonction) ou un type de fragment React .

voici l'exemple officiel, Refer React.Fragment .

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

— premier
source

0

Vous ne pourrez pas vous débarrasser de cet divélément. React.render () doit renvoyer un nœud DOM valide.

— Henrik Andersson
source

les div sont ignorés, Knockout.JS fait la même chose. avoir un div sans style sur la partie extérieure de votre composant n'a aucun effet.

— Chris Hawkes

16

@ChrisHawkes, pas d'accord. un div wrapper affecte les sélecteurs css.

— Downhillski

Lorsque vous travaillez avec des éléments sémantiques, que vous ne voulez pas être entièrement des composants React, cela devient un problème. Disons qu'il y a une section-tag avec des éléments d'en-tête et de pied de page, et entre eux il y a un google map-container, que nous ne voulons pas utiliser dans React. Ensuite, il serait bien d'avoir un en-tête en tant que composant React et un pied de page en tant que composant React, sans avoir à inclure des div supplémentaires: s à l'extérieur à l'intérieur des composants React ... C'est une conception stupide, si vous vous souciez du html you output ...

— Jonas Carlbaum

0

Voici une façon de rendre les composants "transculents":

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

— Ярослав Рахматуллин
source

0

Il existe également une solution de contournement. Le code de bloc ci-dessous génère un fragment sans avoir besoin de React.Fragment.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})

— Erfan Seidipoor
source

0

Je sais que cette question a été répondue, vous pouvez bien sûr utiliser React.Fragment qui ne crée pas de nœud mais vous permet de regrouper des éléments comme un div.

De plus, si vous voulez vous amuser, vous pouvez implémenter (et apprendre beaucoup de choses) un mode React qui supprime les div supplémentaires et pour cela, je veux vraiment partager une excellente vidéo sur la façon dont vous pouvez le faire sur la base de code de réaction elle-même.

https://www.youtube.com/watch?v=aS41Y_eyNrU

Ce n'est bien sûr pas quelque chose que vous feriez dans la pratique, mais c'est une bonne opportunité d'apprentissage.

— Gabriel P.
source