Me gustaría usar operadores mixtos en JSX, por ejemplo:
{datas && datas.map(function(data,i){ return <MyComponent key={i} />}) || []}Si bien esto técnicamente funciona, ES lint advierte sobre "operadores no mixtos". ¿Es este un patrón seguro para usar en JSX?
De la documentación de ESLint :
Encerrar expresiones complejas entre paréntesis aclara la intención del desarrollador, lo que hace que el código sea más legible . Esta regla advierte cuando se utilizan diferentes operadores de forma consecutiva sin paréntesis en una expresión.
var foo = a && b || c || d; /*BAD: Unexpected mix of '&&' and '||'.*/ var foo = (a && b) || c || d; /*GOOD*/ var foo = a && (b || c || d); /*GOOD*/Si no desea recibir notificaciones sobre operadores mixtos, es seguro desactivar esta regla.
Espero que esto ayude.
Simplemente puede envolver en el paréntesis de esta manera. No va a mostrar esa advertencia.
{datas && (datas.map(function(data,i){ return <MyComponent key={i} />}) || [])}
Funcionó para mí.