Je reçois les avertissements suivants dans un composant React:
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} </td>
<td>{params.data.lastName} </td>
</Checkbox>
) : (
<div>
<td>{params.data.firstName} </td>
<td>{params.data.lastName} </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.
Il y a deux problèmes avec votre code
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} </td>,
<td key={2}>{params.data.lastName} </td>
]
au lieu d'envelopper le td
s dans un div
Je vous suggère également d'extraire votre logique en dehors du tr
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} </td>
<td>{params.data.lastName} </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>
.