jsx map中的return语句答案

【问题标题】：return statement in jsx mapjsx map中的return语句
【发布时间】：2018-07-08 21:32:12
【问题描述】：

为什么我仍然看到有些人写return 和braces 而你可以不用braces，尽管你有多行html标签？

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

就像上面的代码一样，它只是工作

【问题讨论】：

我们应该怎么知道？

标签： javascript reactjs ecmascript-6

【解决方案1】：

当您在返回之前有语句时使用大括号。例如，如果我映射数据并且打算在返回之前进行一些计算，我会使用大括号，但我只缩进返回一个块语句，就像在你的代码中一样，我不使用大括号。

需要大括号。

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

不需要大括号

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

【讨论】：

【解决方案2】：

许多可能的情况之一可以是

使用花括号，您可以直接在 react 组件的返回部分中编写此代码：

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

return 语句的用例将在 react 组件的渲染部分中

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

【讨论】：