web-dev-qa-db-fra.com

React <div> ne peut pas apparaître en tant qu'enfant de <tr> Avertissement

Je reçois les avertissements suivants dans un composant React:

 enter image description here

Le code associé est le suivant:

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap'; 

const MyComponent = (params) => {

function onSelect(event) {
    params.onSelect(event, params.data.id);
}

return (
    <tr key={params.data.id}>
        {params.isSelectable ? (
            <Checkbox onChange={onSelect}>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </Checkbox>
        ) : (
            <div>
                <td>{params.data.firstName}&nbsp;</td>
                <td>{params.data.lastName}&nbsp;</td>
            </div>
        )}
    </tr>
);

};

Si je supprime les balises div, j'obtiens l'erreur suivante:

Les éléments JSX adjacents doivent être enveloppés dans une balise englobante

Je suis nouveau sur React, donc je ne suis pas très clair sur ce qui se passe ici. Quel est le problème et comment puis-je le résoudre?

Mise à jour: ma version de React est 15.3.2.

javascripthtmlreactjs
6
lukegf

Il y a deux problèmes avec votre code

  1. Seuls td et th sont autorisés à l'intérieur

  2. Dans React version <15, vous devez envelopper les balises dans un élément lorsque vous essayez de les rendre. Dans la réaction 16, vous pouvez maintenant faire ce qui suit:

    [
  <td key={1}>{params.data.firstName}&nbsp;</td>,
  <td key={2}>{params.data.lastName}&nbsp;</td>
]

    au lieu d'envelopper le tds dans un div

Je vous suggère également d'extraire votre logique en dehors du tr

2
Abderrahmane TAHRI JOUTI

Si vous devez retourner plusieurs éléments et que vous ne pouvez pas avoir de wrapper (comme dans ce cas), vous avez une nouvelle option à partir de React 16.2. Fragments :

<>
  <td>{params.data.firstName}&nbsp;</td>
  <td>{params.data.lastName}&nbsp;</td>
</>

Les choses qui ressemblent à des balises vides sont les fragments ici. Avec cela, vous pouvez renvoyer plusieurs éléments sans élément wrapper, et le <td>s seront des enfants directs de votre <tr>.

0
Ricardo Lopes