Declaración de devolución en el mapa jsx: javascript, reactjs, ecmascript-6

¿Por qué todavía veo a algunas personas escribir return y braces mientras que usted puede hacer sin braces ¿Aunque tienes múltiples líneas de etiquetas html?

{albums.map(o=>
<div key={o.id} className="album-item">
<div className="album-item-name">
{o.name}
</div>
</div>
)}

Como el código de arriba simplemente funcionó

Respuestas

Tirantes cuando se usan cuando tienes sentenciasantes de una vuelta. Por ejemplo, si mapeo a través de datos y tengo la intención de hacer algunos cálculos antes de la devolución, uso llaves, pero solo hago sangría para devolver una declaración de bloque como en su código, no uso las llaves.

Se requieren llaves de rizo.

ablums.map(o => {
const name = `app_${o.name}`
return(  <div key={o.id} className="album-item">
<div className="album-item-name">
{name}
</div>
</div>);
});

Las llaves no son necesarias

{albums.map(o=>
<div key={o.id} className="album-item">
<div className="album-item-name">
{o.name}
</div>
</div>
)}

Uno de los muchos casos posibles puede ser

con llaves, puede escribir este código directamente dentro de la parte de retorno del componente de reacción:

{albums.map(o=>
<div key={o.id} className="album-item">
<div className="album-item-name">
{o.name}
</div>
</div>
)}

El caso de uso para la declaración de devolución se procesará dentro del componente de reacción

let myDivs = albums.map(o=>
return ( <div key={o.id} className="album-item">
<div className="album-item-name">
{o.name}
</div>
</div>
)
)