instrukcja return w mapie jsx - javascript, reactjs, ecmascript-6

Dlaczego wciąż widzę, że niektórzy piszą return i braces kiedy możesz się obejść bez braces chociaż masz wiele linii znaczników html?

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

Podobnie jak powyżej kod po prostu zadziałał

Odpowiedzi:

Szelki, gdy są używane, gdy masz instrukcjeprzed powrotem. Na przykład, jeśli mapuję przez dane i zamierzam wykonać kilka obliczeń przed powrotem, używam nawiasów klamrowych, ale wciskam tylko, aby zwrócić jedną instrukcję blokową, jak w kodzie, którego nie używam.

Wymagane są kręcone klamry.

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

Szelki nie są wymagane

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

Jednym z wielu możliwych przypadków może być

w nawiasach klamrowych możesz napisać ten kod bezpośrednio w części zwrotnej komponentu reagowania:

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

Użyj przypadku dla instrukcji return w środku renderowania części komponentu reakcji

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