0
534
Views"lado izquierdo del operador de coma ..." error en el contenido html de render
Su proceso sencillo;
Aquí está el método de representación de origen que quiero que sea (quiero que mi tabla esté fuera de div): 
pero el compilador jsx no lo permite por alguna razón?
pero si muevo la tabla dentro del elemento div; todo se ve bien 
entonces solo la diferencia es el lugar de la mesa. ¿Por qué jsx interfiere en este proceso? ¿Por qué es necesario?
3 answers
Answer question0
En JSX , podemos devolver solo un elemento html de return , no podemos devolver varios elementos, si desea devolver varios elementos, envuelva todo el código html en un div o en cualquier otro componente contenedor.
Lo mismo está sucediendo en su primer caso, está devolviendo 2 elementos, un div y una table . cuando los envuelve en un div , todo funciona correctamente.
La misma regla que debe seguir para conditional rendering de componentes.
Ejemplo:
Correcto:
{ 1==1 /* some condition */ ? <div> True </div> : <div> False </div> }Equivocado:
{ 1==1 /* some condition */ ? <div> True 1 </div> <div> True 2 </div> : <div> False 1 </div> <div> False 2 </div> }0
Solo una actualización rápida. Si está utilizando React v16.2.0 y superior, también puede usar Fragmentos .
return ( <> <div> True 1 </div> <div> True 2 </div> </> );También respondí a una pregunta similar, más detallada aquí .
0
Este error ocurre cuando la coma se interpreta como "operador de coma" y no como coma dentro de matrices, objetos, etc.
El operador de coma evalúa cada expresión separada por coma y devuelve el último valor.
const foo = (1, 2, 3) // returns 3En este ejemplo, se asignará 3 a foo. Pero es muy probable que el pensamiento del autor (1, 2, 3) se asigne como una tupla de Python. Entonces este error existe.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator
Entonces, si encontró este error, es probable que haya algunos errores en su matriz/objeto/etc. y se interprete como "operador de coma".
Código de ejemplo que causa este error.
const foo = (expr) => { const bar = "" const baz = "" switch (expr) { case 'Oranges', 'Mangoes': // error, you can't use comma for switch break; case 'Papayas': break; } { bar, baz } // You forgot to write return. Javascript thinks this is comma operator. }