web-dev-qa-db-fra.com

Erreur "côté gauche de l'opérateur de virgule .." dans le contenu HTML du rendu

Son processus simple;

Voici la méthode de rendu Origin que je veux qu'elle soit (je veux que ma table soit en dehors de div): enter image description here

mais le compilateur jsx ne le permet pas pour une raison quelconque?

mais si je déplace la table à l'intérieur de l'élément div; tout va bien. enter image description here

donc seulement diff est la place de la table. pourquoi jsx interfère ce processus? pourquoi c'est nécessaire?

reactjsreact-native
35
TyForHelpDude

Dans JSX, nous ne pouvons renvoyer qu'un seul élément html à partir de return, nous ne pouvons pas renvoyer plusieurs éléments. div ou par tout autre composant d'encapsulation.

La même chose se passe dans votre 1er cas, vous retournez 2 éléments, un div et un table. lorsque vous les emballez dans un div tout fonctionne correctement.

Même règle à suivre pour conditional rendering de composants.

Exemple:

Correct:

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

Wrong:

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}
66
Mayank Shukla

Juste une mise à jour rapide. Si vous utilisez React v16.2.0 et supérieur, vous pouvez également utiliser Fragments .

  return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div> 
    </>
  );

J'ai également répondu à une question similaire, plus en profondeur ici

20
Kevin Amiranoff

Une autre cause de cette erreur est la fin accidentelle de votre ligne par une virgule au lieu d'un point-virgule. Cela peut se produire si vous faites une erreur lors du refactoring de votre code.

Ceux-ci donnent des erreurs

return <div>hi</div>, // error
return (<div>hi</div>,) // error

Ce sont corrects:

return <div>hi</div>; // ok
return (<div>hi</div>) // ok
return (<div>hi</div>); // ok

Cette erreur est plus complexe dans ce cas, car elle met en évidence le bloc entier JSX, au lieu de la virgule.

0
Ferrybig